@charset "utf-8";


/*----------------------------------------------------------------*/
/*						_ _            _   _     _         _      */
/*					   | (_)          | | (_)   | |       | |     */
/*	 _ __ ___   ___  __| |_  __ _ _ __| |_ _ ___| |_   ___| |__   */
/*	| '_ ` _ \ / _ \/ _` | |/ _` | '__| __| / __| __| / __| '_ \  */
/*	| | | | | |  __/ (_| | | (_| | |  | |_| \__ \ |_ | (__| | | | */
/*	|_| |_| |_|\___|\__,_|_|\__,_|_|   \__|_|___/\__(_)___|_| |_| */ 
/*                                                       		  */
/*----------------------------------------------------------------*/



/*---------------------------------------*/
/* Schrift Importieren                   */
/*---------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;900&display=swap');
	
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;900&family=Lora&display=swap');

/*-----------------------------------------*/
/* Reset                                   */
/*-----------------------------------------*/

* {
 		box-sizing:border-box;
	  	margin:0;
		padding:0;
        font-family:"Lato", sans-serif;
		}

/*--------------------------------------------*/
/* Generelle Einstellungen                    */
/*--------------------------------------------*/
:root {
		--farbe_1:rgba(248,231,168,1);
		--farbe_2:rgba(61,48,1,1);
		--farbe_3:rgba(100,79,2,1);
		--farbe_4:rgba(143,113,0,1);
		--farbe_5:rgba(219,174,0,1);
		--navfarbe:rgba(143,113,0,1);
		}

body {
		background-image:url("../bilder/background_alt.jpg");
		background-size:cover;
		background-attachment:fixed;
		font-size:18px;
		margin:0;
		min-height: 100vh; 
		position:relative;
		scroll-behavior: smooth;
		}

#container{
		background-color:rgba(255,255,255,0.9);
		border-radius: 5px;
		max-width:1400px;
		margin:2rem auto;
		}		

#logo {
		border-radius: 50%;
	 	height:140px;	
	 	margin:5rem 0rem 0rem 3rem;
	 	padding: 0rem 2rem;
		}
	
#logo svg {
		height:100%;
		}

#content {
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}

h1{
		color:var(--farbe_4);
		padding-left:1rem;
		padding-top:10px;
		}

h2, h3, h4{
		color:var(--farbe_4);
		padding-left:1rem;
		padding-top:10px;
		}

/*---------------------------------------------*/
/* Menu Klaviertastatur 					   */
/*---------------------------------------------*/

nav .set{
		visibility: visible;
		border-radius: 5px;
		} 
	
#hamburger {
		visibility:hidden;
		height:0px;
		}
  
.set {
		box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.4);
		width: 15.5rem;
		}
 
nav a {
	  	color:ivory;
	  	font-weight:bold;
	  	font-size:16px;
		font-family: "Lato", sans-serif; 
	  	text-decoration:none;
		text-align:center;
	  	vertical-align:middle;
	 	}

li {
		float:horizontal;	
		list-style:none;
		margin:0;
		padding:0;
		position:relative;
		}

ul .white {
		height:3.5em;
		width:14em;
		z-index:1;
		border-left:1px solid #bbb; /*#bbb*/
		border-bottom:1px solid #bbb;
		border-radius:0 5px 5px 0;
		box-shadow: -1px 0 0 rgba(255,255,255,0.6) inset,0 0 0px #ccc inset,0 0 3px rgba(0,0,0,0.2);
		background:linear-gradient(to right,#eee 0%,#fff 100%)
		}

ul .white:active {
		border-top:1px solid #777;
		border-left:1px solid #999;
		border-bottom:1px solid #999;
		box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2)
		inset,0 0 3px rgba(0,0,0,0.2);
		background:linear-gradient(to left,#fff 0%,#e9e9e9 100%) 
		}

.black {
		border:1px solid #000; /*#000*/
		border-radius: 3px;
		box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -5px 2px 3px
		rgba(0,0,0,0.6) inset,0 2px 4px rgba(0,0,0,0.5);
		background:linear-gradient(45deg,#222 0%,#555 100%);
		height:2em;
		margin:-1em 1em -1em 0;
		width:9.5em;
		z-index:2;
		}	

.black:active {
		box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px
		rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);
		background:linear-gradient(to right,#444 0%,#222 100%);
		border-radius:5px;	
		}

.a,.g,.f,.d,.c,.i,.j,.k,.b,.e {
		margin:0 -1em 0 0;
		}

ul li:first-child {
  		border-radius:5px 5px 5px 0
		}

ul li:last-child {
  		border-radius:0 5px 5px 5px
		}

li.key.black {
		border-radius:3px;
		}
 
nav {
		margin-left: 2em;
		max-width: 16rem;
		z-index: 20;
		}
	
nav a:link {
		color:var(--farbe_4);
		text-decoration:none;
		transition:all ease-in-out 0.4;  
		}

nav a:visited {
		color:var(--farbe_5); 
        }
    
nav a:hover {
		color:var(--farbe_1);
		transition:all ease-in-out 0.4; 
        }
	
nav a:active {
		color:var(--farbe_3);
		transition:all ease-in-out 0.4; 
        }

main {
		position:relative;	
		width:70%; 
		}

/*----------------------------------------------*/
/* Willkommen                                   */
/*----------------------------------------------*/

main .text_bild {
		display:flex;
		}

main .text_bild p {
		flex:0 1 60%;
		padding:1rem;
		width:100%; 
	 	}

main .portrait_willkommen {
		align-self:center;	
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:300px;
		max-height: auto;
		margin:2rem;
		margin-right:1rem;
		padding:5px;
    	}

.zeichenabstand{
		letter-spacing: 0.05rem;
		}
	
.zeilenabstand{
		line-height:1.3;
		}

main #zitat	{
		display:flex;
		}

blockquote {
		align-content:flex-start;
		color:var(--farbe_4);
		font-size:1.2rem;
		font-weight:bold;
		padding:1.2rem;
		text-align:left;
		width:75%;
		}

.author{
		font-size:0.8rem;
		font-style:normal;
		text-align:right;
			 
		}

div.sticky{
	border: 3px solid var(--farbe_4);
	border-radius: 10px;
	background-color:whitesmoke;
	position:fixed;
	transform: rotate(10deg);
	top:50px;
	right:50px;
	width:400px;
	height: 200px;
	font-size:1.2rem;
	color:black;
	font-weight: 400;
	align-self:flex-end;
	z-index: 999;
}

/*-------------------------------------------*/
/* Bildergalerie                             */
/*-------------------------------------------*/

#container .bilder{
		width:90%;
		}	

#galerie {
		display:flex;
		}

#main_galerie{
		margin-left:8rem;
		width:90%;
		}

#main_galerie h1{
		padding-left:2rem;
		padding-top:12px;        
		}

#raster{
		display:flex;
		flex-direction:row;
		flex:wrap;
		left: 2rem;
		margin:3rem auto;
		padding:2rem 2rem 2rem 2rem;
		top: 8rem;
		text-align: center;
		width:50%;
		}

/*--------------------------------------------*/
/* GRID DEFINITION GALERIE					  */
/*--------------------------------------------*/	

#raster {
		display:grid;	
		height:auto;
		max-width:1100px;
		margin:0 auto;
		width:100%;
		grid-template:
				"a1 		a2 				a3 		a4"
				"c3 		b2 				a3 		b4"
				"c1 		c2 				e1 		e1"
				"c1         d2              d3      d4"
				"e3 		e3              b1 		e2"
				"b3         c4              d1      e4"	;
		grid-gap:10px;
		}
		
#raster .fancybox {
		display:none;
		}

#raster div {
       	background-size:cover;
		background-position:center;
		border-radius:8px;
		min-height: 200px;
		opacity:1;
		transition: ease-in-out 0.7s all;
		} 

#raster div:hover{
       	background-size:cover;
		background-position:center;
		border-radius:10px;
		filter:grayscale(1);
		min-height: 200px;
		opacity:0.7;
		transition: ease-in-out 0.4s all;
		}

#raster a {
		display:block;
		height:100%;
		min-height:250px;
		width:100%;		
		}

#raster a.nolink {
	 	min-height:0px;
		}

		#a1 {
			background-image:url("../bilder/fluegel_2_x1.jpg");
			grid-area:a1;
			}
		#a2 {
			background-image:url("../bilder/orgel_10_x1.jpg");
			grid-area:a2;
			}
		#a3 {
			background-image:url("../bilder/trompete_8_x1.jpg");
			grid-area:a3;
			}
		#a4 {
			background-image:url("../bilder/trompete_16_x1.jpg");
			grid-area:a4;
			}
		#b1 {
			background-image:url("../bilder/orgel_12_x1.jpg");
			grid-area:b1;
			}
		#b2 {
			background-image:url("../bilder/trompete_5_x1.jpg");
			grid-area:b2;
			}
		#b3 {
			background-image:url("../bilder/trompete_27_x1.jpg");
			grid-area:b3;
			}	
		#b4 {
			background-image:url("../bilder/trompete_10_x1.jpg");
			grid-area:b4;
			}
		 #c1 {
			background-image:url("../bilder/trompete_7_x1.jpg");
			grid-area:c1;
			}
		#c2 {
			background-image:url("../bilder/bigband_3_x1.jpg");
			grid-area:c2;
			}
		#c3 {
			background-image:url("../bilder/orgel_9_x1.jpg");
			grid-area:c3;
			}
		#c4 {
			background-image:url("../bilder/orgel_2_x1.jpg");
			grid-area:c4;
			}
		#d1 {
			background-image:url("../bilder/ov_1_x1.jpg");
			grid-area:d1;
			}
		#d2 {
			background-image:url("../bilder/fluegel_3_x1.jpg");
			grid-area:d2;
			}
		#d3 {
			background-image:url("../bilder/orgel_5_x1.jpg");
			grid-area:d3;
			}
		#d4 {
			background-image:url("../bilder/trompete_24_x1.jpg");
			grid-area:d4;
			}
		#e1 {
			background-image:url("../bilder/trompete_29_x1.jpg");
			grid-area:e1;
			}
		#e2 {
			background-image:url("../bilder/trompete_2_x1.jpg");
			grid-area:e2;
			}
		#e3 {
			background-image:url("../bilder/bigband_4_x1.jpg");
			grid-area:e3;
			}
		#e4 {
			background-image:url("../bilder/trompete_11_x1.jpg");
			grid-area:e4;
			}

/*--------------------------------------------*/
/* Klavier                                    */
/*--------------------------------------------*/

main .portrait {
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:400px;
		max-height:300px;
		margin:3rem 2rem;
		padding:5px;
		}

.fussnote {
		font-size:0.9rem;
		max-width:50%;
	 	margin:3rem 2rem;
		}

a.textlink:link {
		color:var(--farbe_4);	
		text-decoration:none;
		transition:all ease-in-out 0.4; 
        }

a.textlink:active{
		color:var(--farbe_3);
		text-decoration:none;
		}

 a.textlink:visited {
		color:var(--farbe_4);	
		text-decoration:none;
		}

 a.textlink:hover {
		background-color: rgba(143,113,0,0.3);		
		color:var(--farbe_5);
		transition:all ease-in-out 0.4; 
        }

/*--------------------------------------------*/
/* Orgel                                      */
/*--------------------------------------------*/

main .portrait_orgel{
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:260px;
		max-height:400px;
		margin:3rem 2rem;
		padding:5px;
		}

/*--------------------------------------------*/
/* Trompete                                   */
/*--------------------------------------------*/

main .portrait_trompete {
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:260px;
		max-height: 400px;
		margin:3rem 2rem;
		padding:5px;
		}

/*---------------------------------------------*/
/* Konzerte                                    */
/*---------------------------------------------*/

table {
		border-collapse: collapse;
		margin-left:1em;
		text-align: center;
		width: 90%;
		}

th {
		background-color:rgba(143,113,0,0.5);
		border:1px solid rgba(143,113,0,0.5);
		padding:3px;
		}

tr .untertitel{
		background-color:rgba(143,113,0,0.3); 
		border:1px solid rgba(143,113,0,0.5);
		font-size:1.2rem; 
		font-weight:bold;
		}

tr td {
		border:1px solid rgba(143,113,0,0.5);
		padding:3px;
		}

#coronaupdate {
		padding-left:1rem;
		}	

.edit{
		display:flex;
		text-align-last: right;
		 
		}


/*---------------------------------------------*/
/* Kontakt                                     */
/*---------------------------------------------*/


main .kontakt{
		display:flex;
		flex-wrap:wrap;
		flex-direction:column;
		width:80%; 
		}

.kontakt h1 {
		padding-bottom:1em;
		}


button, input, select, textarea {
		font-family:inherit;
		font-size: 100%;
		}

#myForm {
		display:flex;
		flex-wrap:wrap;
		}

.antispam {
		display:none;
		
		
}

#postkarte_main {
		background-color:rgba(255,255,255,1);
		box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.4);
		border:1px solid rgba(143,113,0,1);
		height:450px;
		margin-left:1rem;
		width: 750px;
		}

#postkarte_main img {
		border:1px solid rgba(143,113,0,1);
		transform:rotate(5deg);
		width: 100%;
		}
	
#postkarte_rechts {
		flex: 1 0 50%;
		order:3;
		padding: 20px;
		}

#postkarte_links {
		flex: 1 0 50%;
		order:2;
		padding: 20px;
		}

input[type=radio]{
		background-color:#FFF8DC;
		}

input[type=text]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
	  	}

input[type=email]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
		}

#senden {
		align-self: flex-end;	
		flex: 1 0 100%;
		min-height: 67px;	
		order:1;
		padding:30px 50px 0px 0px;
		text-align:end;
		}

.button {
		background: url("../bilder/marke.png") no-repeat;
		background-size:cover;
		border:none;
		cursor:pointer;
		color:#632400;
		font-size:0.8rem;
		min-height:90px;
		min-width:80px;
		padding-top:3rem;
		}

.auto-size img {
		height: auto;
		width: auto;
		}

textarea {
		border-color:var(--farbe_4);
		height:100%;
		padding:5px;
		resize: none;
		width:95%;
		}

/*---------------------------------------------*/
/* Footer                                      */
/*---------------------------------------------*/

footer {
		display:flex;
		flex-direction:row;
		margin-top:3rem;
		padding:1rem;
		}
	
footer .fas {
	 	color:var(--farbe_4);
		}

#copyright {
		color:var(--farbe_4);
		flex:1 0 auto;
		justify-content:space-between;
		padding:2px;
		padding-left:2rem;
		text-align: left;
		}

#footer_rechts {
		color:var(--farbe_4);
		flex:1 0 auto;
		justify-content:space-between;
		padding:2px;
		padding-right:2rem;
		text-align: right;
		}

#footer_rechts a   {
		margin:0em 1em ;
		} 
		
#icons {
		color:var(--farbe_4);
		}

footer a:link {
		color:var(--farbe_4);
		text-decoration:none;
		transition:all ease-in-out 0.4;			
        }
    
footer a:hover {
		color:var(--farbe_5);
		transition:all ease-in-out 0.4; 
        }

footer a:visited {
		color:var(--farbe_2); 
		}

footer a:active {
		color:var(--farbe_4); 
        }	

/*--------------------------------------------*/
/*Impressum                                   */
/*--------------------------------------------*/

#impr-data {
		margin-left:5em;
		text-align: left;
		padding-left:2rem;
		}

#impressum_text {
		padding-left:1rem;
		}
 
#datenschutz {
		padding-left:1rem;
		}

#container.impr {
		background-color: white; 
		}

a.link:link {
		color:var(--farbe_4);
		text-decoration:none;
		transition:all ease-in-out 0.4;			
        }
    
a.link:visited {
		color:var(--farbe_4); 
		}   	

a.link:hover {
		color:var(--farbe_5);
		transition:all ease-in-out 0.4; 
        }

a.link:active {
		color:var(--farbe_3); 
        }	


/* ============================================ */
/* CMS Style       */
/* ============================================ */	

div.content{
	display: flex;
	justify-content: center;
}
.cms {
	color:black;
	
		}

.loeschen {
		color:red;
	    }
div.erstellen{
	align-content: center;
	color:darkgreen;
	font-weight: bold;
	
}
div.bez {
	
	border:1px;
	border-color:black;
	border-style:solid;
	text-align: center;
	font-weight: bold;
	width: 400px;
} 
div.eintrag{
	
	border:1px;
	border-color:black;
	border-style:solid;
	text-align: center;
	color:var(--farbe_4);
	width: 400px;
}

/* ================================================ */
/* MEDIA QUERY 1250px nur Bildergalerie */
/* ================================================ */	
	@media screen and (max-width:1250px)	{
		
#container .bilder{
		width:90%;
		}	

#galerie {
		display:flex;
		}

#main_galerie{
		margin-left:8rem;
		width:90%;
		}

#main_galerie h1{
		padding-left:2rem;
		padding-top:12px;        
		}

#raster{
		display:flex;
		flex-direction:row;
		flex:wrap;
		left: 2rem;
		margin:3rem auto;
		padding:2rem 2rem 2rem 2rem;
		top: 8rem;
		text-align: center;
		width:50%;
		}

/*--------------------------------------------*/
/* GRID DEFINITION GALERIE					  */
/*--------------------------------------------*/	

#raster {
		display:grid;	
		height:auto;
		max-width:1100px;
		margin:0 auto;
		width:100%;
		grid-template:
				" a1	a2 	a3"
				"a4 b1 b2  b3"
				"";
		grid-gap:10px;
		}
		
#raster .fancybox {
		display:none;
		}
	
#raster div {
       	background-size:cover;
		background-position:center;
		border-radius:8px;
		min-height: 200px;
		opacity:1;
		transition: ease-in-out 0.7s all;
		} 

#raster div:hover{
       	background-size:cover;
		background-position:center;
		border-radius:10px;
		filter:grayscale(1);
		min-height: 200px;
		opacity:0.7;
		transition: ease-in-out 0.4s all;
		}

#raster a {
		display:block;
		height:100%;
		min-height:250px;
		width:100%;		
		}

#raster a.nolink {
	 	min-height:0px;
		}

		#a1 {
			background-image:url("../bilder/fluegel_2.jpg");
			grid-area:a1;
			}
		#a2 {
			background-image:url("../bilder/orgel_10.jpg");
			grid-area:a2;
			}
		#a3 {
			background-image:url("../bilder/trompete_8.jpg");
			grid-area:a3;
			}
		#a4 {
			background-image:url("../bilder/trompete_16.jpg");
			grid-area:a4;
			}
		#b1 {
			background-image:url("../bilder/orgel_12.jpg");
			grid-area:b1;
			}
		#b2 {
			background-image:url("../bilder/trompete_5.jpg");
			grid-area:b2;
			}
		#b3 {
			background-image:url("../bilder/trompete_27.jpg");
			grid-area:b3;
			}	
		#b4 {
			background-image:url("../bilder/trompete_10.jpg");
			grid-area:b4;
			}
		 #c1 {
			background-image:url("../bilder/trompete_7.jpg");
			grid-area:c1;
			}
		#c2 {
			background-image:url("../bilder/bigband_3.jpg");
			grid-area:c2;
			}
		#c3 {
			background-image:url("../bilder/orgel_9.jpg");
			grid-area:c3;
			}
		#c4 {
			background-image:url("../bilder/orgel_2.jpg");
			grid-area:c4;
			}
		#d1 {
			background-image:url("../bilder/ov_1.jpg");
			grid-area:d1;
			}
		#d2 {
			background-image:url("../bilder/fluegel_3.jpg");
			grid-area:d2;
			}
		#d3 {
			background-image:url("../bilder/orgel_5.jpg");
			grid-area:d3;
			}
		#d4 {
			background-image:url("../bilder/trompete_24.jpg");
			grid-area:d4;
			}
		#e1 {
			background-image:url("../bilder/trompete_29_x1.jpg");
			grid-area:e1;
			}
		#e2 {
			background-image:url("../bilder/trompete_2.jpg");
			grid-area:e2;
			}
		#e3 {
			background-image:url("../bilder/bigband_4.jpg");
			grid-area:e3;
			}
		#e4 {
			background-image:url("../bilder/trompete_11.jpg");
			grid-area:e4;
			}
}


/*============================================*/
/* MEDIA QUERY                                */
/*============================================*/			
@media screen and (max-width:1000px){

body{
		display:flex;		
	}
	
#logo {
		border-radius: 50%;
	 	margin:2rem 0rem 0rem 1.5rem;
	 	height:140px;
	 	padding: 0rem 2rem;
		}

#container{
		background-color:rgba(255,255,255,0.8);
		margin:0 auto;
		width:100%;
		}	
	
#galerie {
		width:90%;	
		}

h1{
		padding-left:2rem;
		}
	
#content {
		flex-direction:column;
		margin:0 auto;
		width:100%;
		}
	
button {
		-webkit-appearance: none;
		-webkit-border-radius: none;
		background:white;
		border-radius: 10px;
		border:1px solid var(--farbe_4);
		}	
	
nav {
		height: 0em;
		width:0em;
		}	
	
nav .set {
		visibility: hidden;
		}
	
#hamburger {
		color:var(--farbe_4);	
		height:4rem;
		padding:0.5rem 1rem;
		position:fixed;	
		right:2em;
		top:2em;
		visibility:visible;
		z-index: 999;
		}
	
 #menu {
        box-shadow: 1px 1px 22px 1px rgba(33,33,33,0.3);
	 	background:white;
	    max-width: 200px;
		max-height: 500px;
	 	padding:1rem;
	 	position:fixed;
		right:3em;
		top:8em;
	 	z-index: 999;
		}
	
#menu a{
     	border-bottom:1px solid #666;
	 	color:var(--farbe_4);
	 	display:block;
        padding:1rem;
        text-align:center;
        text-decoration: none;
		}
 
#menu a:first-child{
     	border-top:1px solid #666;
	 	}
 
#hamburger .fa {
        font-size:2rem;
        }    
	
main {
		position:relative;
		width:100%; 
		}

/*----------------------------------------------*/
/* Willkommen                                   */
/*----------------------------------------------*/

main .text_bild {
		display:flex;
		flex-direction:column;
		width:90%;
		}
	
main .text_bild p {
		flex:0 1 100%;
		padding:2rem;
		width:100%; 
		}

blockquote {
		padding:1.2rem 1.2rem 1.2rem 2rem;
		text-align:left;
		width:75%;
		}

div.sticky{
	border: 3px solid var(--farbe_4);
	border-radius: 10px;
	background-color:whitesmoke;
	position:relative;
	transform: rotate(0deg);
	top:20px;
	left:400px;
	width:350px;
	height: 200px;
	font-size:1.2rem;
	color:black;
	font-weight: 400;
	padding-left: 5px;
	align-self:flex-end;
	z-index: 999;
	transition:.5s;
}	

/*-------------------------------------------*/
/* Bildergalerie                             */
/*-------------------------------------------*/

#main_galerie{
		margin-left:0;
		width:100%;
		}
	
#main_galerie h1{
		padding-left:0rem;
		}
	
#raster{
		display:flex;
		flex-direction:row;
		flex:wrap;
		left: 2rem;
		overflow:scroll;
		padding:2rem 2rem 2rem 0rem;
		top: 8rem;
		text-align: center;
		}
	
/*---------------------------------------------*/
/* GRID DEFINITION GALERIE 1000px              */
/*---------------------------------------------*/	
#raster {
		width:100%;
		height:100vw;
		display:grid;
		grid-template:
			"a1 		a2"
			"a3 		a4"
			"e1 		b2"
			"b3 		b4"
			"c1 		c2"
 			"c3 		c4"
			"d1         d2"
			"d3		    d4"
			"b1 		e2"
			"e3 		e4"	;
		grid-gap:10px;
		}

#raster div {
       	background-size:300px;
		background-position:center;
		border-radius:5px;
		min-height: 300px;
		}

#raster a {
		display:block;
		width:100%;
		height:100%;
		min-height:300px;
		}

/*--------------------------------------------*/
/* Klavier                                    */
/*--------------------------------------------*/

main .portrait {
		align-self:center;
		max-width:400px;
		max-height:400px;
		}

.fussnote {
		max-width:80%;
	 	margin:3rem 2rem;
		}

/*--------------------------------------------*/
/* Orgel                                      */
/*--------------------------------------------*/

main .portrait_orgel{
		align-self:center;	
		max-width:400px;
		max-height:400px;
		}

/*--------------------------------------------*/
/* Trompete                                   */
/*--------------------------------------------*/

main .portrait_trompete {
		align-self:center;
		max-width:400px;
		max-height: 400px;
		}
	
/*---------------------------------------------*/
/* Konzerte                                    */
/*---------------------------------------------*/

table {
		margin-left:2rem;
		}

#coronaupdate {
		padding-left:2rem;
		}		
		
/*---------------------------------------------*/
/* Kontakt                                     */
/*---------------------------------------------*/

button, input, select, textarea {
		font-size: 90%;
		}

#myForm {
		display:flex;
		flex-wrap:wrap;
		}

#postkarte_main {
		margin-left:2rem;
		width: 750px;
		}

#postkarte_main img {
		height:50%;
		margin:0 auto;
		width: 50%;
		}
	
#senden {
		flex: 1 0 100%;
		min-height: 67px;
		order:1;
		padding:30px 50px 0px 0px;
		}

.button {
		background: url("../bilder/marke.png") no-repeat;
		background-size:cover;
		border:none;
		cursor:pointer;
		color:saddlebrown;
		font-size:0.8rem;
		min-height:70px;
		min-width:60px;
		}

.auto-size img {
		height: auto;
		width: auto;
		}

textarea {
		width:95%;
		}


/* ================================================ */
/* MEDIA QUERY 900px nur Aktuelles */
/* ================================================ */	
	@media screen and (max-width:900px)	{	
	
	div.sticky{
	border: 3px solid var(--farbe_4);
	border-radius: 10px;
	background-color:whitesmoke;
	position:relative;
	transform: rotate(0deg);
	top:20px;
	left:50px;
	width:300px;
	height: 200px;
	font-size:1rem;
	color:black;
	font-weight: 400;
	padding-left: 5px;
	align-self:flex-end;
	z-index: 999;
	transition:.5s;
}	

	
/* ============================================ */
/* MEDIA QUERY Landscape       */
/* ============================================ */
@media (orientation: landscape) {
		
#hamburger {
		color:var(--farbe_4);	
		height:3rem;
		padding:0.5rem 0.5rem;
		position:fixed;	
		right:1rem;
		top:1rem;
		visibility:visible;
		z-index: 999;
		}
	
 #menu {
        box-shadow: 1px 1px 22px 1px rgba(33,33,33,0.3);
	 	background:white;
	    max-width: 200px;
		max-height: 480px;
	 	padding:1rem;
	 	position:fixed;
		right:1rem;
		top:4rem;
	 	z-index: 777; 
		}
	
#menu a{
     	border-bottom:1px solid #666;
	 	color:var(--farbe_4);
	 	display:block;
        padding:0.5rem;
        text-align:center;
        text-decoration: none;
		}
	}

/* ================================================ */
/* MEDIA QUERY 770px nur Kontaktformular und Footer */
/* ================================================ */	
	@media screen and (max-width:770px)	{
		
.kontakt h1 {
		padding-left:4.5rem;
		padding-bottom:1rem;
		}

input, select, textarea {
		font-size: 90%;
		padding:3px;
		}

#myForm {
		display:flex;
		flex-wrap:wrap;
		height: auto;
		}

#postkarte_main {
		flex-wrap:wrap;
		height: auto;
		margin:0 auto;	
		width:80%;
		}	
	 
#postkarte_rechts {
		flex: 1 0 100%;
		height:auto;
		margin-top:2rem;
		order:1;
		padding: 0rem 0rem 0rem 2rem;
		}
		
#postkarte_links {
		flex: 1 0 100%;
		heigth:auto;
		margin-top:4rem;
		order:2;
		padding: 0rem 0rem 0rem 2rem; 
		}

#senden {
		flex: 1 0 100%;
		margin: 0rem 0rem 2rem 2rem;	
		order:3;
		text-align: left;
		}

input[type=radio]{
		background-color:#FFF8DC;
		margin-left: 1rem;
		}

input[type=text]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
		width:80%;
		}

input[type=email]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
		width:80%;
		}

input[type=submitt]{
		-webkit-appearance: none;
		background:white;
		}
	
.button {
		background:white;
		border:1px solid #8F7100;
		border-radius:5px;
		cursor:pointer;
		font-size:0.8rem;
		padding:0;
		} 

textarea {
		border-color:var(--farbe_4);
		height:300px;
		padding:5px;
		resize: none;
		width:80%;
		}
	
/*---------------------------------------------*/
/* Footer                                      */
/*---------------------------------------------*/	

footer {
		display:flex;
		flex-direction:column;
		margin-top:3rem;
		padding:1rem;
		}
	
footer .fas {
	 	color:var(--farbe_4);
		}

#copyright {
		color:var(--farbe_4);
		flex:1 0 auto;	
		justify-content:space-between;
		padding:2px;
		text-align: center;
		}

#footer_rechts {
		color:var(--farbe_4);
		flex:1 0 auto;
		justify-content:space-between;
		padding:2px;
		text-align: center;
		}

#footer_rechts a {
		margin:0rem 1rem ;
		} 
		
#icons {
		color:var(--farbe_4);
		}	

a.link:link {
		color:var(--farbe_4);
		text-decoration:none;
		transition:all ease-in-out 0.4;			
        }
    
a.link:visited {
		color:var(--farbe_4); 
		}   	

a.link:hover {
		color:var(--farbe_5);
		transition:all ease-in-out 0.4; 
        }

a.link:active {
		color:var(--farbe_3); 
        }	
}
	
/* ============================================ */
/* MEDIA QUERY 450                              */
/* ============================================ */			
	@media screen and (max-width:450px){
		
body{
		display:flex;
		font-size:0.8rem;
		width:100%;
		}
	
h1{
		padding-left:1rem;
		}
	
#logo {
		border-radius: 50%;
	 	height:100px;
		margin:2rem 0rem 0rem 1.5rem; 	
		padding: 0rem 2rem;
		}
	
#logo svg {
		height:100%;
		}
		
#container{
		background-color:rgba(255,255,255,0.8);
		min-width:100%;
	 	}
		
#galerie {
		width:100%;	
		}
	
#content {
		flex-direction:column;
		margin:0 auto;
		width:100%;
		}
	
nav {
		height: 0rem;
		width:0rem;
		}	
	
nav .set {
		visibility: hidden;
		}

button {
		-webkit-appearance: none;
		-webkit-border-radius: none;
		border-radius: 5px;
		border:1px solid var(--farbe_4);
		}		
	
button:active {
		-webkit-appearance: none;
		-webkit-border-radius: none;
		border-radius: 5px;
		border:1px solid var(--farbe_4);
		}				
		
#hamburger {
		color:var(--farbe_4);
		height:2.5rem;
		padding:0.5rem 0.5rem;
	 	position:fixed;
		right:1rem;
	 	top:1rem;
	 	visibility:visible;
	 	z-index:99;
		}
	
#hamburger .fa {
        font-size:1.5rem;
        }	
		
#menu {
        background:white;
		box-shadow: 1px 1px 22px 1px rgba(33,33,33,0.3);
		max-width: 200px;
		max-height: 500px;
       	padding:1rem;
	 	position:fixed;
		right:1em;
		top:4.5rem;
		z-index:99;
	 	}
		
#menu a{
     	border-bottom:1px solid #666;
	 	color:var(--farbe_4);
	 	display:block;
		font-size:1rem;
        padding:0.5rem;
        text-align:center;
        text-decoration: none;
		z-index:99;
		}
 
#menu a:first-child{
     	border-top:1px solid #666;
        }
	
main {
		position:relative;
		width:100%; 
		}

/*----------------------------------------------*/
/* Willkommen                                   */
/*----------------------------------------------*/

main .text_bild {
		display:flex;
		flex-direction:column;
		width:90%;
		}
		
main .text_bild p {
		flex:0 1 100%;	
	 	padding:1rem;
		width:100%;
		}

main .portrait_willkommen {
		align-self:center;	
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:300px;
		max-height: 400px;
		margin:2rem;
		margin-right:1rem;
		padding:5px;
    	}

.zeichenabstand{
		letter-spacing: 0.05rem;
		}
	
.zeilenabstand{
		line-height:1.3;
		}

main #zitat	{
		display:flex;
		}

blockquote {
		align-content:flex-start;
		color:var(--farbe_4);
		font-size:0.9rem;
		font-weight:bold;
		padding:3rem;
		width:75%;
		text-align:left;
		}

.author{
		font-size:0.6rem;
		font-style:normal;
		text-align:right;
		}
		
div.sticky{
	border: 3px solid var(--farbe_4);
	border-radius: 10px;
	background-color:whitesmoke;
	position:relative;
	transform: rotate(0deg);
	top:20px;
	left:20px;
	width:200px;
	height: 150px;
	font-size:0.8rem;
	color:black;
	font-weight: 400;
	padding-left: 5px;
	align-self:flex-end;
	z-index: 999;
	transition:.5s;
}	


/*-------------------------------------------*/
/* Bildergalerie                             */
/*-------------------------------------------*/

#container .bilder{
		width:90%;
		}

#galerie {
		display:flex;
		}

#main_galerie{
		width:90%;
		}	
		
#main_galerie h1{
		padding-left:1rem;
		padding-top:12px;        
		}

#raster{
		display:flex;
		flex-direction:row;
		flex:wrap;
		overflow:scroll;
		padding:1rem 1rem 1rem 1rem;
		top: 8rem;
		text-align: center;
		}
		
/*----------------------------------------------*/
/* GRID DEFINITION GALERIE 450px                */
/*----------------------------------------------*/	

#raster {
		display:grid;
		grid-template:
				"a1 		a2"
				"a3 		a4"
				"b1 		b2"
				"b3 		b4"
				"c1 		c2"
 				"c3 		c4"
				"d1         d2"
				"d3		    d4"
				"e1 		e2"
				"e3 		e4" ;
		grid-gap:5px;
		height:100vw;
		width:100%;
		}

#raster .fancybox {
		display:none;
		}

#raster div {
        background-size:cover;
		background-position:center;
		border-radius:5px;
		min-height: 150px;
		}

#raster a {
		display:block;
		height:100%;
		width:100%;
		}

/*--------------------------------------------*/
/* Klavier                                    */
/*--------------------------------------------*/

main .portrait {
		align-self:center;
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:250px;
		max-height:250px;
		margin:3rem 2rem;
		padding:5px;
		}

.fussnote {
		font-size:0.6rem;
		}

/*--------------------------------------------*/
/* Orgel                                      */
/*--------------------------------------------*/

main .portrait_orgel{
		align-self:center;
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:250px;
		max-height:250px;
		margin:3rem 2rem;
		padding:5px;
		}

/*--------------------------------------------*/
/* Trompete                                   */
/*--------------------------------------------*/

main .portrait_trompete {
		align-self:center;
		box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4);
		flex:0 1 40%;
		max-width:250px;
		max-height: 250px;
		margin:3rem 2rem;
		padding:5px;
		}

/*---------------------------------------------*/
/* Konzerte                                    */
/*---------------------------------------------*/

table {
		border-collapse: collapse;
		font-size:0.8rem; 
		margin-left:1rem;
		text-align: center;
		width: 90%;
		}

th {
		background-color:rgba(143,113,0,0.5);
		border:1px solid rgba(143,113,0,0.5);
		padding:3px;
		}
		
tr .untertitel{
		background-color:rgba(143,113,0,0.3); 
		border:1px solid rgba(143,113,0,0.5);
		font-size:0.8rem; 
		font-weight:bold;
		}

tr td {
		border:1px solid rgba(143,113,0,0.5);
		padding:3px;
		}
		
#coronaupdate {
		padding-left:1rem;
		}

/*---------------------------------------------*/
/* Kontakt                                     */
/*---------------------------------------------*/
	
main .kontakt{
		display:flex;
		flex-wrap:wrap;
		flex-direction:column;
		}

.kontakt h1 {
		padding-left:2rem;
		padding-bottom:1rem;
		}

.button {
		-webkit-appearance: none;
		background:white;
		border:1px solid #8F7100;
		border-radius:5px;
		color:black;
		cursor:pointer;
		min-height: 45px;
		font-size:0.8rem;
		padding:0;
		} 
		
input, select, textarea {
		font-family:inherit;
		font-size: 100%;
		}

#myForm {
		display:flex;
		flex-wrap:wrap;
		height: auto;
		}

#postkarte_main {
		background-color:rgba(255,255,255,1);
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		border:none;	
		display:flex;
		flex-wrap:wrap;
		height: auto;
		margin:0 auto;	
		width:100%;
		}	
		
#postkarte_main img {
		height:70%;
		margin:0 auto;
		width: 70%;
		}
		
#postkarte_rechts {
		flex: 1 0 100%;
		height:auto;
		margin-top:2rem;
		order:1;
		padding: 0rem 0rem 0rem 2rem;
		}
		
#postkarte_links {
		flex: 1 0 100%;
		heigth:auto;
		margin-top:2rem;
		order:2;
		padding: 0rem 0rem 0rem 2rem; 
		}

#senden {
		flex: 1 0 100%;
		margin-left: 2rem;
		order:3; 	
		text-align: left;
		}

input[type=radio]{
		background-color:#FFF8DC;
		margin-left: 1rem;
		}

input[type=text]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
		width:90%;
		}

input[type=email]{
		box-sizing: border-box;
		border:none;
		border-bottom:1px solid #8F7100;
		width:90%;
		}

input[type=submitt]{
		background:white;
		}

textarea {
		border-color:var(--farbe_4);
		border-radius:5px;
		height:300px;
		padding:5px;
		resize: none;
		overflow:auto;
		width:90%;
		}

/*---------------------------------------------*/
/* Footer                                      */
/*---------------------------------------------*/

footer {
		display:flex;
		flex-direction:column;
		padding:1rem;
		margin-top:3rem;
		}

#footer_rechts a   {
		margin:0rem 0.4rem ;
		} 

		}
		}