<style>                                    /*  buchner */

html, body {
    height: 100%;
}
html, body, header, .demo, section { 
  background: url(img/rauh.gif) repeat; 
}

a {
	text-decoration:none;
	}

body {
    display: table;
    width: 100%;
	margin: 0 auto;
/* 	padding: 3em; */
/*  border: 2px solid grey;  */
}

* {
/*     margin: .2em;
    padding: .3em; */
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 500;
}
header {
    width: 100%;
    float: left;
/*     border-bottom: 1px solid black; */
}

section {
    width: 60%;
    padding:8px;
    margin: 0 auto;
}

#bereichlogo {
    color: #000080;
    background: url(img/rauh.gif) repeat;
    display: block;
    padding: 0.6em;
    text-decoration: none;
    float: left;
    width: auto;
}
#steuerung li {
    list-style: none;
    float: left;
}
#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.45em;
    font-weight: 500;
    color: white;
    background-color: #999; /* mittl grau */
    }
    
.menue-button {
    display: none;
}   
#steuerung {
    float: right;
}
#steuerung a:hover {
    color: black;
    background: #d5d5ff; /* orange wie rahmen */
}	
/* CSS erweitert um MENÜ-Button und entsprechende Steuerung */

/*	Menü-Button oben rechts einblenden bei kleiner als 700px */
@media only screen and (max-width:700px) {
	.menue-button {
		display: block;
	}
	.menue-button {
		background-color: #66f; /* mittl blau */
		display: block;
		position: absolute;
		right: 0;
		top: 1.1em;
		padding: 0.6em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	#bereichlogo {
		width: 100%;
/* border-bottom: 2px solid silver; */
	}
	#steuerung {
		float: right;
		width: 68%;
		display: none;
	}	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}	
	.menue-button:hover {
		color: black;
		background: #f5cb43; /* orange */
	}
}
/* um Steuerung einzublenden */
#nav-menue:target #steuerung {
    display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
    display: none ; 
}                                                                         
/* Allgemein Anweisungen */

/*                             Logo................ */
.demo {
		width:180px;
		height:90px;
/* 		padding-top:0; */
	}

/* 	.demo td {
		padding-top:px;
		text-align: center;
		align: top; */
	}
	
	/*                             Motto................ */
.motto {
		width:360px;
		height:auto;
		padding-top: 4.5em;
	}

/* 	.demo td {
		padding-top:px;
		text-align: center;
		align: top; */
................................................
	.adr {
		border:1px solid #C0C0C0;
		border-collapse:collapse;
		padding:8px;
	}
main {
    padding-top: 3em; 
    float: center;
    width: auto;
}

h1, h2, h3, p {
	text-align: center;
	font-weight:300;
	color: #009;
}
h4, table {
	text-align: center;
	font-weight: 3000;
	font-size:14px;
	color: #009;
}
h5 {
	text-align: center;
	font-weight:300;
	font-size:12px;
	color: #009;
}

/* figure {
  border: 0;
  padding:5px;
  margin: auto;
  max-width: 400px;
  height: auto;
}

figcaption {
  background-color: #91a1ae;
  color: white;
  font-style: normal;
  font-size: 16pt;
  padding: 4px;
  text-align: center;
} */

/* #block {
	text-align: center;
	line-height: 1.4em;
	font-size: 14pt; 
}*/
..........................................................
                                                          /* mason */
..........................................................
.masonryholder{
    column-count: 3;
    column-gap: 0;
    max-width: 1000px;
    margin: 0, auto ;
    }
 
  .masonryblocks{
    display: block;
    background: ;
    padding: 6px;
    margin: 0 0 0;
    width:auto;
    box-sizing: border-box;
    }
 
  .masonryblocks img{
    width: 90%;
    }
 
  @media screen and (max-width:768px){
    .masonryholder{
      column-count: 1;
    }
    }
 
  @media screen and (min-width:769px){
    .masonryholder{
      column-count: 2;
    }
    }
 
  @media screen and (min-width:1080px){
    .masonryholder{
      column-count: 3;
    }
    }
 
  @media screen and (min-width:1200px){
    .masonryholder{
      column-count: 3;
    }
    }
............................................                      .............

</style>  /* Buchner */
