﻿		html, body {
				/*max-width: 70em;*/
				font-family:Arial, Helvetica, sans-serif;
		}
		html {
			width: auto;
		}
		
		body{
			margin: 0em auto;
/*			max-width: 50em; */
			font-family: sans-serif;
			color: #333333;
			display: grid;
/*			-ms-grid-columns: repeat(12, 1fr);*/
			grid-template-columns: repeat (12,1fr);
		}

		actuell, header_menu, main, header_logo, 
		article_top, article_content, article_aside1, article_aside2, article_past, article_past2, 
		section, footer, footer_top, footer_menu_left, footer_menu_right, footer_past {
			border-radius: 0px 0.5em 0.5em;
			width: auto;
			border: 0.05em solid;
			padding: 0.5em;
			margin: 0.05em;
		}
		header {
			background: #F1F3F4;
			border-color: #d5d5d5;
			grid-column: 1 / 13;
			grid-row: 1 / 3;
		}	
	
		header_logo {
/*			width="100%";/*nur gut für das Logo-Bild, nicht für den Text*/ /*jan 2020 */
			background: #F1F3F4;/*jan 2020 */
			border-color: #d5d5d5;/*jan 2020 */
			grid-column: 1 / 13;
			grid-row: 1 / 2;
		}
		header_menu {
			background: #F1F3F4;
			border-color: #d5d5d5;
			grid-column: 1 / 13;
  			grid-row:    2 / 3;		
		}
		actuell {
			background: #fffbf0;
			border-color: #e7c157;
			grid-column: 1 / 13;
  			grid-row:   3/ 4;			
		}
		article_top {
			background: #fffbf0;
			border-color: #e7c157;
			grid-column: 1 / 13;
  			grid-row:    4 / 5;					
		}

		article_content {
			background: #fffbf0;
			border-color: #e7c157;
			grid-column: 1 / 13;
			grid-row: 5 / 6;
		}

		article_past {
			background: #fffbf0;
			border-color: #e7c157;
			grid-column: 1 / 13;
  			grid-row:    6 / 7;					
		}
		article_past2 {
			background: #fffbf0;
			border-color: #e7c157;
			grid-column: 1 / 13;
  			grid-row:    7 / 8;					
		}
		article_aside1 {
			background: #ebf5d7;
			border-color: #8db243;
			grid-column: 1 / 13;
	  		grid-row:    8 / 9;								
		}
		article_aside2 {
			background: #ebf5d7;
			border-color: #8db243;
			grid-column: 1 /13;
  			grid-row:    9 / 10;								
		}

		footer {
			background: #e4ebf2;
			border-color: #8a9da8;
			grid-column: 1 / 13;
  			grid-row:    10 / 15;					
		}
		footer_top {
			background: #e4ebf2;
			border-color: #8a9da8;
			grid-column: 1 / 13;
  			grid-row:    10 / 11;					
		}
		footer_menu_left {
			background: #e4ebf2;
			border-color: #8a9da8;
			grid-column: 1 / 13;
  			grid-row:    11 / 12;					
		}
		footer_menu_right {
			background: #e4ebf2;
			border-color: #8a9da8;
			grid-column: 1 / 13;
  			grid-row:    12 / 13;					
		}
		footer_past {
			background: #e4ebf2;
			border-color: #8a9da8;
			grid-column: 1 / 13;
  			grid-row:    13 / 14;					
		}




<style>
#steuerungmitdetails {
	list-style-type: none;
	background-color:#ddd;

}
#steuerungmitdetails ul {
	margin-left: 1em;
	padding-left: 0;
	list-style-type: none;
}
#steuerungmitdetails ul ul {
	margin-left: 0.5em;
	padding-left: 0.5em;
}
#steuerungmitdetails ul li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;	
}
#steuerungmitdetails ul li li {
	list-style-type: square;
}

#steuerungmitdetails details details {
	background-color:#ccc;
	margin-left: 0.5em;
}

#steuerungmitdetails details {
	background-color:#eee;
	margin-left: 0.5em;
/	text-decoration:underline;
	
}

#steuerungmitdetails details[open] summary {
	background-color:#cf9;
}


#steuerungmitdetails details[open] {
	background-color:#ff9;
}

</style>


/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  webtroll Newslisten-Anmeldung 
<style type="text/css">
form.nt {
  display: inline;
}
.nt_fs {
  border: 1px solid #639ACE;
  font-family: Tahoma,sans-serif;
  font-size: 100%;
  display: block;
  width: 25em;
  margin: 0px;
  padding: 6px;
}
.nt_head {
  font-family: Tahoma,sans-serif;
  font-size: 100%;
  font-variant:small-caps;
  font-weight:bold;
  padding: 0px 4px 0px 4px;
  margin: 0px;
}
input.nt_input:focus, select.nt_input:focus, textarea.nt_input:focus {
  color: #000000;
  background-color: #ffff99;
  background-image: none;
}
.nt_input {
  border: 1px solid black;
  font-family: Tahoma,sans-serif;
  font-size: 100%;
  width: 15em;
  cursor: pointer;
}
input.button {
  border: 1px solid black;
  font-family: Tahoma,sans-serif;
  font-size: 100%;
}
label.left {
  float: left;
  text-align: right;
  width: 85px;
  margin-right: .3em;
}
label.left, input.nt_input {
  cursor: pointer;
}
.formCell {
  vertical-align: top;
  color: #000000;
  background-color: transparent;
  padding: 4px;
  margin: 0px;
  display: block;
  cursor: pointer;
}
p.button {
  text-align: right;
}

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  webtroll Newslisten-Anmeldung 
*/



/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
@media all and (min-width: 25 em) 
{
		header_logo {
			grid-column: 1 / 13 ;
			grid-row: 1 / 2 ;
		}
		header_menu {
			grid-column: 1 / 13;
  			grid-row:    2 / 3;	
		}
		actuell {
			grid-column: 1 / 13;
  			grid-row:   3/ 4;			
		}
		article_top {
			grid-column: 1 / 13;
  			grid-row:    4 / 5;					
		}
		article_content {
			grid-column: 1 / 13;
			grid-row: 5 / 6;
		}
		article_past {
			grid-column: 1 / 13;
  			grid-row:    6 / 7;					
		}
		article_past2 {
			grid-column: 1 / 13;
  			grid-row:    7 / 8;					
		}
		article_aside1 {
			grid-column: 1 / 13;
	  		grid-row:    8 / 9;								
		}
		article_aside2 {
			grid-column: 7 /13;
  			grid-row:    9 / 10;								
		}

		footer {
			grid-column: 1 / 13;
  			grid-row:    10 / 15;					
		}
		footer_top {
			grid-column: 1 / 13;
  			grid-row:    10 / 11;					
		}
		footer_menu_left {
			grid-column: 1 / 13;
  			grid-row:    11 / 12;					
		}
		footer_menu_right {
			grid-column: 1 / 13;
  			grid-row:    12 / 13;
  			background:green; 					  			
		}
		footer_past {
			grid-column: 1 / 13;
  			grid-row:    13 / 14;					
		}
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
@media all and (min-width: 30em) 
{
		actuell, article_top, article_content, article_past {
				grid-column: 1 / 13;
		}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	

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

		header_menu {
			grid-column: 7 / 13;
			grid-row: 1 / 2;
		}
		actuell {
			grid-column: 1 / 13;
  			grid-row:   3/ 4;			
		}
		article_top {
			grid-column: 1 / 13;
  			grid-row:    4 / 5;					
		}
		article_content {
			grid-column: 1 / 13;
			grid-row: 5 / 6;
		}
		article_past {
			grid-column: 1 / 13;
  			grid-row:    6 / 7;					
		}
		article_past2 {
			grid-column: 1 / 13;
  			grid-row:    7 / 8;					
		}
		article_aside1 {
			grid-column: 1 / 7;
	  		grid-row:    8 / 9;								
		}
		article_aside2 {
			grid-column: 7 /13;
  			grid-row:    8 / 9;								
		}
		footer_top {
			grid-column: 1 / 13;
  			grid-row:    9 / 10;					
		}
		footer_menu_left {
			grid-column: 1 / 7;
  			grid-row:    10 / 11;					
		}
		footer_menu_right {
			grid-column: 7 / 13;
  			grid-row:    10 / 11;
		}
		footer_past {
			grid-column: 1 / 13;
  			grid-row:    11 / 12;					
		}		
}



@media all and (min-width: 45em) {

		header {
			grid-column: 1 / 13;
			grid-row: 1 / 2;
		}
	
		header_logo {
			grid-column: 1 / 11;
			grid-row: 1 / 2;
		}
		header_menu {
			min-width: 25%;
			grid-column: 11 / 13;
			grid-row: 1 / 2;
		}
		
		header_menu li {
			display:block;
		}
		actuell {
			grid-column: 1 / 2;
			grid-row: 2 / 7;
		}
		article_top, article_content, article_past, article_past2 {
			grid-column: 2 / 11;
		} 
		article_top {
			grid-row: 3 / 4;
		}
		article_content {
			grid-row: 4 / 5;
		}
		article_past {
			grid-row: 5 / 6;
		}
		article_past2 {
			grid-row: 6 / 7;
		}
		article_aside1, article_aside2 {
			grid-column: 11 / 13;
		} 
		article_aside1 {
			grid-row: 3 / 5;
		}
		article_aside2 {
			grid-row: 5 / 7;
		}
}



@media all and (min-width: 60em) {

		header {
			grid-column: 1 / 13;
			grid-row: 1 / 2;
		}
	
		header_logo {
			grid-column: 1 / 11;
			grid-row: 1 / 2;
		}
		header_menu {
			min-width: 45%;
			grid-column: 11 / 13;
			grid-row: 1 / 2;
		}
		
		header_menu li {
			display:block;
		}
		actuell {
			grid-column: 1 / 2;
			grid-row: 2 / 7;
		}
		article_top, article_content, article_past, article_past2 {
			grid-column: 2 / 11;
		} 
		article_top {
			grid-row: 3 / 4;
		}
		article_content {
			grid-row: 4 / 5;
		}
		article_past {
			grid-row: 5 / 6;
		}
		article_past2 {
			grid-row: 6 / 7;
		}
		article_aside1, article_aside2 {
			grid-column: 11 / 13;
		} 
		article_aside1 {
			grid-row: 3 / 5;
		}
		article_aside2 {
			grid-row: 5 / 7;
		}
}



@media all and (min-width: 60em) {

		header {
			grid-column: 1 / 13;
			grid-row: 1 / 2;
		}
	
		header_logo {
			grid-column: 1 / 11;
			grid-row: 1 / 2;
		}
		header_menu {
			min-width: 45%;
			grid-column: 11 / 13;
			grid-row: 1 / 2;
		}
		
		header_menu li {
			display:block;
		}
		actuell {
			grid-column: 1 / 2;
			grid-row: 2 / 7;
		}
		article_top, article_content, article_past, article_past2 {
			grid-column: 2 / 11;
		} 
		article_top {
			grid-row: 3 / 4;
		}
		article_content {
			grid-row: 4 / 5;
		}
		article_past {
			grid-row: 5 / 6;
		}
		article_past2 {
			grid-row: 6 / 7;
		}
		article_aside1, article_aside2 {
			grid-column: 11 / 13;
		} 
		article_aside1 {
			grid-row: 3 / 5;
		}
		article_aside2 {
			grid-row: 5 / 7;
		}
}
