*, *:before, *:after {
  box-sizing: border-box;
}

html{
	line-height: 1.5;
}

.border {
	background-color:green;
	border: 1px solid red;
}

/* --- mit Viewport nicht mehr erforderlich 
@media screen and (min-resolution: 200dpi) {
	html{font-size: 260%}
}
-- */
/*

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 200;
	src: url('/css/fonts/assistant-light.ttf');
}


@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 600;
	src: url('/css/fonts/assistant-bold.ttf');
}
*/

/*
Jost-BlackItalic.ttf
Jost-Black.ttf
Jost-BoldItalic.ttf
Jost-Bold.ttf
Jost-ExtraBoldItalic.ttf
Jost-ExtraBold.ttf
Jost-ExtraLightItalic.ttf
Jost-ExtraLight.ttf
Jost-Italic.ttf
Jost-LightItalic.ttf
Jost-Light.ttf
Jost-MediumItalic.ttf
Jost-Medium.ttf
Jost-Regular.ttf
Jost-SemiBoldItalic.ttf
Jost-SemiBold.ttf
Jost-ThinItalic.ttf
Jost-Thin.ttf

Poppins-BlackItalic.ttf
Poppins-Black.ttf
Poppins-BoldItalic.ttf
Poppins-Bold.ttf
Poppins-ExtraBoldItalic.ttf
Poppins-ExtraBold.ttf
Poppins-ExtraLightItalic.ttf
Poppins-ExtraLight.ttf
Poppins-Italic.ttf
Poppins-LightItalic.ttf
Poppins-Light.ttf
Poppins-MediumItalic.ttf
Poppins-Medium.ttf
Poppins-Regular.ttf
Poppins-SemiBoldItalic.ttf
Poppins-SemiBold.ttf
Poppins-ThinItalic.ttf
Poppins-Thin.ttf

*/
@font-face {
	font-family: 'Jost';
	font-style:	normal;
	font-weight: 300;
	src: url('/css/fonts/Jost-Light.ttf'); 
		/*src: url('/css/fonts/Jost-Regular.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300;
	 src: url('/css/fonts/Jost-LightItalic.ttf'); 
		/*src: url('/css/fonts/Jost-Italic.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style:	normal;
	font-weight: normal;
	src: url('/css/fonts/Jost-Regular.ttf'); 
		/*src: url('/css/fonts/Jost-Regular.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: normal;
	 src: url('/css/fonts/Jost-Italic.ttf'); 
		/*src: url('/css/fonts/Jost-Italic.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: bold;
	src: url('/css/fonts/Jost-Bold.ttf');
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: bold;
	src: url('/css/fonts/Jost-BoldItalic.ttf');
}
/* ---------------------------- */ 
/*
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 200;
	src: url('/css/fonts/Poppins-Light.ttf'); 
		
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 200;
	 src: url('/css/fonts/Poppins-LightItalic.ttf'); 
		
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('/css/fonts/Poppins-Bold.ttf');
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 600;
	src: url('/css/fonts/Poppins-BoldItalic.ttf');
}
*/
/*
Outfit-Black.ttf          
Outfit-Bold.ttf           
Outfit-ExtraBold.ttf      
Outfit-ExtraLight.ttf     
Outfit-Light.ttf          
Outfit-Medium.ttf         
Outfit-Regular.ttf        
Outfit-SemiBold.ttf       
Outfit-Thin.ttf           

*/
/*
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100;
	src: url('/css/fonts/Outfit-ExtraLight.ttf'); 
}
@font-face {
	font-family: 'Outfit';
	font-style: italic;
	font-weight: 100;
	 src: url('/css/fonts/Outfit-ExtraLight.ttf'); 
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 200;
	src: url('/css/fonts/Outfit-Light.ttf'); 
}
@font-face {
	font-family: 'Outfit';
	font-style: italic;
	font-weight: 200;
	 src: url('/css/fonts/Outfit-Light.ttf'); 
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	src: url('/css/fonts/Outfit-Bold.ttf');
}
@font-face {
	font-family: 'Outfit';
	font-style: italic;
	font-weight: 600;
	src: url('/css/fonts/Outfit-Bold.ttf');
}
*/

html, body, input, textarea {
	/*font-family:Outfit, Poppins, Jost, Assistant, sans-serif;*/
	font-family: Jost, Assistant, sans-serif;
	font-size: 110%;
}


h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
}

@media all {
				body{
					/* font-family: Tahoma, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; */
					font-weight: normal;
					font-style: normal;
					vertical-align: baseline;
					margin:		0px 		0px	0px		0px;
					background-color: #808080;
				}
				body, td {
					color: #FFFFFF;
					/*line-height: 145%;*/
				}
				
				.bg1hg {
					background-image: url("images/hg/1hg.jpg");
				}
			
				.bg11a {
					background-image: url("images/hg/11-a.jpg");
					background-repeat: no-repeat;
				}
				.bg14 {
					background-image: url("images/hg/14.jpg");
					background-repeat: no-repeat;
				}
				.bg12a {
					background-image: url("images/hg/12-a.jpg");
					background-repeat: no-repeat;
				}
				.bg12c {
					background-image: url("images/hg/12-c.jpg");
					background-repeat: no-repeat;
				}
			
				a:visited {
					color: #ffda00;
					text-decoration: none
				}

				a:link {   color: #ffda00; text-decoration: none}
				a:hover {
					color: #ffffff;
					border-color: #e1c000;
					border-width: 0px 0px 1px 0px;
					border-style: dotted;
					text-decoration: none
				}

}

@media print {
		body{
			font-weight: normal;
			font-style: normal;
			vertical-align: baseline;
			/* bei print keine anderen Fonts! font-family: Verdana,Arial, Helvetica, sans-serif;*/
			margin:		0px 		0px	0px		0px;
			background-image: none;
			background-color: transparent;
		}
	
		body, td {
			font-size: 12px;
			color: #000000;
			line-height: 1.5;
		/* 	color: #676767;
		*/
		}
		.bg1hg {
			background-image: none;
		}
		.bg11a {
			background-image: url("images/hg/11-a-print.jpg");
			background-repeat: no-repeat;
		}
		.bg14 {
			background-image: url("images/hg/14-print.jpg");
			background-repeat: no-repeat;
		}
		.bg12a {
			background-image: none;
		}
		.bg12c {
			background-image: none;
		}
	
	
		a:visited {  color: #101010; text-decoration: none}
		a:link {   color: #101010; text-decoration: none}
		a:hover {
			color: #101010;
			border-color: #e1c000;
			border-width: 0px 0px 1px 0px;
			border-style: dotted;
			text-decoration: none
		}
	

}

.Werbung {
	position: absolute; 
	margin-left: auto;
	margin-right: auto;
	z-index:1000;
	max-width: 1200px;
	width: 95%;
}
.WerbungInnen {
	padding: 0rem;
	position: relative;
	top: 5vh;
	width: 90vw;
}
.WerbungInnen img{
	max-height: 90vh;
	max-width: 90vw;
	box-shadow: 0 0 8em black;
	transition: max-height 0.5s;
	cursor: pointer;
}
.WerbungInnen.hide  img{
	max-height:0 ;
	transition: max-height 0.5s;
}

.TerminSubline {
	/*color: #D0D0D0	;*/
	color: #F0F0F0	;
	font-size: 0.8rem;
}

.InfoImpressum {
	color: #474747;
}


/* unterstrichen für kleine Überschriften */
.unterstrichen {
	border-bottom: 1px dotted gray;
}

/* für Umformatierung <hr>-Tag: */
.hrAbstand20 {
	height: 1px;
	margin-top: 4px;
	margin-bottom: 15px;
	width:100%;
	background-color:#cccccc;  /* das brauch tder FireFox */
	color:#cccccc;		/* das braucht der IE */
	border-style: none;
}

/* hellgraue Links: */
#linkgrau a, #linkgrau A:hover , #linkgrau a:link { color: #474747}
#linkgrau a:hover { color: #FF0000; background-color: #FFCC33; text-decoration: none}
#linkgrau a:link { text-decoration: none}

.bg00  { background-color: #FFFFFF}
.bg03  { background-color: #f9f9f9}
.bg05  { background-color: #f6f6f6}
.bg07  { background-color: #f0f0f0}
.bg10   {  background-color: #EEEEEE}
.bg20 { background-color: #CCCCCC}
.bg30  { background-color: #666666}
.bg40 { background-color: #444444}
.bg50 { background-color: #343434}
.bgOrange { background-color: #ffda00}

.f00 { color: #FFFFFF}
.f05 { color: #D9D9D9}
.f10 { color: #BEBEBE}
.f20 { color: #6A6A6A}
.f30 { color: #333333}
.fErr { color: #FF0000}
.fOrange, .fMorgen { color: #ffda00}
.fRot, .fHeute { color: #ff0000}



.urhere { font-size: 0.8rem; text-align: right}
.comm,  .comm td,  .comm th { font-size: 1rem; }
.pix09, .pix09 td , .pix09 th {  font-size: 0.9rem;}
.pix10 {  font-size: 0.8rem;}
.pix11 {  font-size: 0.9rem;}
.pix12 {  font-size: 1rem;}
.pix14 {  font-size: 1.2rem;; font-weight: 100}
.pix24 { font-size: 2rem; font-weight: 100}
.pix36 { font-size: 3rem;; font-weight: 100}

.f0mini, .FormularDetailsLink	 	{ font-size: 0.8rem;}

.InfoImpressum,
	.f1klein {	
		font-size: 1.1rem;
	}
.f2normal, body, table, p, input, h4, h5 { font-size: 1rem; }

.f3gross, h3	 	{ font-size: 1.5rem;}
.f4maxi	, h2 	{ font-size: 2.8rem;}
.f5mega, h1	 	{ font-size: 3.2rem;}

/* für Über-Überschriften auf Berichts-Seiten 2022-02-05 */
div.galerien2 h1>.f1klein {
		font-size: 1.1rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
}
/* dito auf Startseite */
div.eventzeile div.titelzeile .fmini,
div.eventzeileletzter div.titelzeile .fmini {
		letter-spacing: 0.05em;
		font-weight: lighter;
		text-transform: uppercase;
}

/* tab {{{*/
.tab  {
	/* font-size: 9px; /* hier falsch */
	empty-cells: show;
	border-style: solid;
	border-color: rgb(192, 192, 192) rgb(122, 122, 122) rgb(122, 122, 122) rgb(192, 192, 192);
	background-color: transparent;
	border-width: 1px;
	font-weight: inherit;
	/* padding:100px;   bringt hier nix */
	border-spacing:0px;
	/* border-collapse:collapse;    zieht alle Zellen aufeinander, egal was als border-spacing angegeben ist!  */
	/* margin:10;   macht einen leeren Rahmen um die ganze Tabelle...  */
}

.tab  td, .tab  th {
	/* font-size: 9px; */
	/* Rahmen um jede Zelle */

		border-style: solid;
		border-color: rgb(222,222,222);
		border-width: 0px 1px  1px 0px;
		/* text-align: left; */
		vertical-align: top;
		padding:5px;  /* das hier bringt Abstand zum Rand */
}

.tab  th {
	background-color: #888888;
	color: white;
	/* untere Linie etwas dunkler */
	text-align: left;
	font-weight: bold !important;
	border-color: rgb(222, 222, 222) rgb(222,222, 222) rgb(152, 152, 152) rgb(222, 222, 222);
}
/* }}}*/

/* tabnoshow - unsichtbare Tabelle zum reinen Anordnen von Inhalten {{{*/
.tabnoshow  {
	empty-cells: show !important;
	border-style: solid ;
	background-color:transparent;
	border-width: 0px !important;
	/* padding:100px;   bringt hier nix */
	border-spacing:0px !important;
	/* border-collapse:collapse;    zieht alle Zellen aufeinander, egal was als border-spacing angegeben ist!  */
	/* margin:10;   macht einen leeren Rahmen um die ganze Tabelle...  */
}

.tabnoshow  th {
	font-weight: normal;
	text-align: left;
	/* untere Linie etwas dunkler */
}

.tabnoshow td, .tabnoshow  th {

	vertical-align: top;
	/* text-align: left; */
	padding:5px;  /* das hier bringt Abstand zum Rand */
}

/* }}}*/

/* Zusatz-Formatierung tabtrennlinien: Linien unter den Zeilen, th dunkler: {{{ */

.tabtrennlinien td, .tabtrennlinien  th {
		border-style: dotted;
		border-color: rgb(202,202,202);
		border-width: 0px 0px  1px 0px;
}

.tabtrennlinien  th {
		border-color: rgb(162,162,162);
}

/* }}} */

.pad10 td, .pad10 th {
		padding:10px !important;  /* das hier bringt Abstand zum Rand */
}

.pad5 td, .pad5 th {
		padding:5px !important;  /* das hier bringt Abstand zum Rand */
}

.pad3 td, .pad3 th {
		padding:3px !important;  /* das hier bringt Abstand zum Rand */
}
.pad2 td, .pad2 th {
		padding:2px !important;  /* das hier bringt Abstand zum Rand */
}

.pad1 td, .pad1 th {
		padding:1px !important;  /* das hier bringt Abstand zum Rand */
}

.pad0 td, .pad0 th {
		padding:0px !important;  /* das hier bringt Abstand zum Rand */
}

.headertab td, .headertab th {
		padding:10px;  /* das hier bringt Abstand zum Rand */
		vertical-align:middle;
		text-align: center;
}

/* Zusatz-Formatierungen tab-img   {{{ */

.tab-img tr.bg05, .tab-img td.bg05, .tab-img th.bg05 {
	background-image: url('../images/hg-th05.png');
}
.tab-img tr.bg10, .tab-img td.bg10, .tab-img th.bg10{
	background-image: url('../images/hg-th10.png');
}

.tab-img tr.bg20, .tab-img td.bg20, .tab-img th.bg20 {
	background-image: url('../images/hg-th20.png');
}

.tab-img tr.bg30, .tab-img td.bg30, .tab-img th.bg30 {
	background-image: url('../images/hg-th30.png');
}

/* }}} */


/* .................................

/* --------------------------------
		Info-Kasten: {{{*/
		
		.InfoKasten {
			padding:  0 1em 0.6em 1em;
			background-color: grey;
			border: 1px orange solid;
		}
		
		.InfoKasten.Links {
			float: right;
			max-width: 200px;
			width: 51%;
			margin: 0 0 0 1em;
			max-width: 400px;
		}
		/* }}} */


/* --------------------------------
		Bild-Link: {{{*/

	.BildLink a:link {
		border-width: 0px;
	}

	.BildLink a:hover {
		border-width: 0px;
	}

	.BildLink a:visited {
		border-width: 0px;
	}

	.BildLink a:link img {
		border-color: #ffda00 #b2973a #b2973a #ffda00;
		border-width: 1px 2px 2px 1px;
		border-style: solid;
	}

	.BildLink a:visited img {
		border-color: #ffda00 #a78100 #a78100 #ffda00;
		border-width: 1px 2px 2px 1px;
		border-style: solid;
	}

	.BildLink a:hover img {
		border-color: #a78100 #ffc500 #ffc500 #a78100  ;
		border-width: 2px 1px 1px 2px;
		border-style: solid;
	}

	/* Rahmen bei eingeblendetem Bild: */
	.BildLink .aktiv {
		border-color: red !important;
	}
	
	div#liebesbrief h1
	,div#liebesbrief h2
	,div#liebesbrief h3	
	,div#liebesbrief h4	
	{
		text-align: left;
	}

	p.Hinweis {
		background-color: #595959;
		padding: 0.2em 0.5em 0.3em 0.5em;
		border: 1px solid #8e8e8e;
	}	
	.qrcoderechts {
		float: right;
		background-color: white;
		color: black;
		padding: 0 0.9em 0 0.9em;
		margin: 0 0 0.2em 0.9em;
	}
	
	/* Plakat im Infokasten Heiligabend */
	div.Aktionskasten img.PlakatGross {
		margin: 0 0 1em 2em;
		width: 40%;
		max-width:400px;
		float:right;
		border-color: #ffda00 #b2973a #b2973a #ffda00;
		border-width: 1px 2px 2px 1px;
		border-style: solid;
		right: -5px;
		top: -5px;
		position: relative;
		box-shadow: 0px 0px 36px black;
	}


/* }}} */

/* --------------------------------
		Bild-Link NoFrame: {{{*/


	.BildLinkNoFrame a:link img {
		border-width: 0px;
		border-style: none;
		border-style: solid;
	}

	.BildLinkNoFrame a:visited img {
		border-width: 0px;
	}

	.BildLinkNoFrame a:hover img {
		border-width: 0px;
		text-decoration: none;
	}

	.BildLinkNoFrame a:hover  {
		border-width: 0px;
	}

	a.BildLinkNoFrame:hover  {
		border-width: 0px;
	}

/* }}} */

.source {
	font-family: "Courier New", Courier, mono;
	border-color: rgb(212, 212, 212);
	margin:2px 2px 2px 2px;
	border-style: dotted;
	border-width: 1px 1px 1px 1px;
	padding:1px 3px 1px 3px;  /* das hier bringt Abstand zum Rand */
}

/* für eingerückte Icons links oben im Text */
div.indentlinks {
    font-size: 0.8rem;
    float: left; 
    margin: 9px 5px -2px 0; /* O R U L - freier Raum UM das eigentliche DIV - "Abstand" */ 
    padding: 0px;  /*  ORUL - "Innen-Rahmen" um Inhalt des DIVs - "Watte" */
  }

hr {
	background-color:#BBBBBB; 
	height:1px;
	background-image: url('images/hr_bg.png');
	margin: 5px 0px; /* O/U L/R */
	text-align:left; 
	border:0px ;
}
  
/* tabbilder {{{*/
.tabbilder  {
	/* font-size: 9px; /* hier falsch */
	empty-cells: show;
	border-color: #ffda00 #b2973a #b2973a #ffda00;
	border-width: 2px 4px 4px 2px;
	border-style: solid;
	/* padding:100px;   bringt hier nix */
	border-spacing:0px;
	/* border-collapse:collapse;    zieht alle Zellen aufeinander, egal was als border-spacing angegeben ist!  */
	/* margin:10;   macht einen leeren Rahmen um die ganze Tabelle...  */
}

.tabbilder  td, .tabbilder  th {
	/* font-size: 9px; */
	/* Rahmen um jede Zelle */

		border-style: solid;
		border-width: 0px;
		vertical-align: top;
		text-align: left;
		padding:10px;  /* das hier bringt Abstand zum Rand */
}

.tabbilder  th {
	color: #666666;
	/* untere Linie etwas dunkler */
	font-weight: bold !important;
	border-color: rgb(222, 222, 222) rgb(222,222, 222) rgb(152, 152, 152) rgb(222, 222, 222);
}
/* }}}*/

/* Formular-Elemente {{{ */
input[type="submit"], input[type="button"] {
	background-image: url('images/rq-hg20.png');  /* Pfad relativ zur CSS-Datei! */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	border: 1px #6D6D6D  solid;
	padding: 0px;
	}

input[type="submit"]:hover, input[type="button"]:hover {
	background-image: url('images/rq-hg05.png');
	cursor: pointer;
	border-color : #ffc500;
	/* cursor: hand; */ /* so nur für Internet Explorer bis 5.5 */
	}

/* auch beim überstreichen einer Textbox etc. den Rahmen aufblinken lassen analog zu Buttons: */
textarea:hover, input[type="text"]:hover,  select:hover {
	border-color:  #fadc77 #a78100 #a78100 #fadc77  ;
	border-style: solid;
	/* cursor: hand; */ /* so nur für Internet Explorer bis 5.5 */
	}

textarea, input[type="text"],  select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	border: 1px #ADADAD  dotted ;
	background-color: #FFFFFF;
	padding: 2px;
	}

	/* bei Aktivierung: anderer Hintergrund! */
input:focus,  textarea:focus,  select:focus, checkbox:focus{
	border: 1px;
	background-color : #fee2a8 !important;
	border-style: solid;
	border-color: #a78100 #fadc77 #fadc77 #a78100  ;
	}

/*   }}} 	*/


/* Liebesbrief */


div#kopf p { font-size: 2rem; 
		line-height: 145%;
}
div#kopf table { margin-left: 10px;
	margin-right: 10px;
}
div#kopf .bg05 p { color: black;
	font-size: 1rem;
margin:5px}
div#liebesbrief p { font-size: 1.2rem; 
		line-height: 145%;
		margin-left: 25px;
		margin-right: 25px;
}
div#liebesbrief p.pix14 { font-size: 2rem; }
div#liebesbrief p.pix24 { font-size: 3rem; }

div#liebesbrief p.BibelStelle { 
		line-height: 125%;
		margin: 5px 25px 5px 25px;
}

div#liebesbrief p.BibelStelle span { font-size:0.9rem;
	margin-right: 10px;
}
div#liebesbrief p.Fussnote  { font-size:0.9rem;
	color:silver;
}

#FlyerBild {
  max-width: 90vw;
}

#Flyer {
  position: fixed;
  top: 5%;
  left: 5vw;
  box-shadow: 0.5rem 0.5rem 1rem #151515;
}

div.BildFlaechen {							
  position: fixed;
  z-index: 1;
  visibility: hidden;
  left: 7vw;
  top: 50px;
  }

   div.BildFlaechen img.Bild {
		max-width: 91vw;
		height: auto;
		max-height: 75vh;
		width: auto;
	  }

@media print {
				div#liebesbrief p.BibelStelle { 
						color: black;
				}
				table {
					background-color: white;
					background-image: none;
				}
				div.titel {
					display: none;
				}
				.wrapinnen div.box.flaechig {
					box-shadow: none;
				}
} 
	

div.flashplayaudio object {
	margin: 3px 0px 5px 0px;
}

@media all {
			div.titel a:hover {
				text-decoration: none;
				/*border: 10px solid red;*/
				border: none !important;
			}

			div.wrapaussen {
		
				margin-left: auto;
				margin-right: auto;
				max-width:1200px;
				width:95%;
		
			}
			
			
			div.wrapinnen {
				width:100%;
				padding: 0rem;
				position: relative;
			}
			
			/* im Aktions-Kasten Überschriften nicht zentrieren*/
			div.Aktionskasten h3 {
				text-align: left;
				
			}

			.clear {
				clear: both;
			}

			.wrapinnen div.box {
				width: 100%;
				margin: 1rem 0 1rem 0;
				padding: 1.4rem 5% 1rem 5%;

			}
			
			.wrapinnen div.box.flaechig {
				border-radius:1rem;
				display: inline-block;
			}			
			
			.wrapinnen .center {
				align: center;
			}

			div.wrapinnen div.titel {
				margin-top:0;
				width: 100%; 
				box-shadow: 0.5rem 0.5rem 1rem #333;
				border-radius: 0 0 1rem 1rem;
			}

			div.wrapinnen div.titel img{
				display: block;
				padding: 0; 
				width: 100%; 
				border-radius: 0 0 1rem 1rem;
			}

			.wrapinnen div.box h1, h2, h3, h4 {
				font-style: normal;
				font-weight: 100;
				border-bottom : 1px solid silver;
				text-align: center;
			}
			.wrapinnen div.box h3 {
				margin-top: 2rem;
				border-color: silver;
			}
			.wrapinnen div.box h1,h2, h4 {
				clear:both;
			}
			.wrapinnen div.box h4 {
				margin-top: 2rem;
			}
			.wrapinnen div.box h3 {
				margin-top: 2rem;
				border-color: silver;
			}
			
			.wrapinnen div.box h1 {
				margin-top: auto;
			}
			
			.wrapinnen div.box div.rechts {
				float: right;
				margin: auto auto 1rem 1rem;
			}
			
			.menuoben {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				margin-bottom:0 !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
			}
			/*
			.menuoben {
				background-color: none;
				text-align: center;
				padding: 0.1rem 5%  !important;
				word-spacing: 2em;
				line-height: 2rem;
			}
		*/
			.menuoben a {
				text-align: center;
				background-color: #686868;
				word-spacing: 0em !important;
				border-radius: 0.3rem;
				padding: 0.1rem 0.8rem; 
				box-shadow: 0.05rem 0.05rem 0.5rem #333;
				margin: 0.3em;
			}		
			.menuoben a:hover {
				background-color: #828282;
				text-decoration: none;
				border: none;
			}/*
			.menuoben p {
				padding: 0.1rem 0  !important;
				margin: 0;
			}*/
			
			.menuunten {
				background-color: none;
				text-align: center;
				padding: 0.1rem 5%  !important;
				margin-top: 5em !important;
			}

			.menuunten p {
				padding: 0.1rem 0  !important;
				font-size: 3rem;
				margin: 0;
			}

			.bilder { 
			  background-color: black;
			}
			.auftritte {
			  background-color: #555;
			
			}
			.proben {
			  background-color: #888;
			
			}
			.stand {
			  background-color: red;
			  }
			  
			.kontakt {
			  background-color: green;
			  }
			  
			.plakate {
			  background-color: black;
			}
			.statements {
			  background-color: blue;
			  }
			  
			.archiv {
			  background-color: gray;
			
			}
			.archiv h1, .archiv h2 {
				clear: none !important;
			}
			.bcause {
			  background-color: #222;
			
			}
			.spenden {
			  background-color: #222;
			
			}
			.galerien {
				background-color: #666;
			}
			
			.galerien2 {
				background-color: #333;
			}
			.plakateklein {
				
			   display: grid;
			    align-items: flex-end;    
			    column-gap: 1em;
			    row-gap: 0.5em;
			    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
			   justify-items: flex-start;
			   justify-content: end;
			   grid-auto-flow: inherit;
			}
			.plakateinzeln {
			}				
			  
			.jahrtrenner  {
				border-style: dotted;
				border-color: rgb(202,202,202);
				border-width: 0px 0px  1px 0px;
				padding-top: 1rem !important;
			}
					
			
			/* Header mit Abstand und Unterstreichung {{{ */
			
			
			/* }}} */
			
			
			div.videorechts {
				/* background-color: red; */
				float: right;
				max-width: 528px; 
				width: 60%; 
				margin: auto auto 1rem 1rem;

			}
			div.videorechts video {
				max-width: 528px;
				width: 100%;
			}
			/* wir haben im Moment Breiten 528, 540 und 1280 pixel.. */
			
			video.video528 {
				max-width: 528px;
				width: 100%;
			}
			video.video540 {
				max-width: 540px;
				width: 100%;
			}
			video.video1280 {
				max-width: 1280px;
				width: 100%;
			}
			
			div#GalerieRest {
				max-height:0px;
				transition: max-height 3s;
				overflow:hidden;
			}
			
			
			
			div#GalerieRest.sichtbar {
				transition: max-height 3s;
				max-height:3000em;
			}
			
			div.boeppel {
				color: silver;
				cursor: pointer;
			}
			div.nachobenbtn {
				position: -webkit-sticky; 
				position: sticky;
				/* border: 1px solid blue; */
				color: silver;
				font-size: 1.5rem;
				cursor: pointer;
				top: 0em;
				float: right;
				margin-top: -2.4em;
				margin-right: 0.2em;
				padding-top: 0.4em;
				text-shadow: 0.1rem 0.1rem #00000050;
			}

			
			/* klappt so NICHT... 
			div#GalerieRest.sichtbaralles {
				transition: max-height 10s;
				max-height:unset;
			}
			*/
			
			div.previewlast {
				float: left;
			}
			div.previewlast div {
				float: left;
				margin: auto 1rem 1rem auto; 
			}
			div.previewlast div img {
				width: 800px;
				max-width: 100%;
			}
			
			div.preview div.videohinweis {
				position: absolute;
				top: 0;
				left: top;
				font-weight: bold;
				background-color: white;
				color: black;
				padding: 0.3rem;
				opacity: 0.8;
				
			
			}
			div.titelzeile span.titel {
				font-size: 2.3em;
				color: white !important;
				font-weight: lighter;
			}	
			
			div.eventzeile {
				margin-top: 3.5em;
			}

			div.eventzeile div.intern {
				width: max-content;
				font-weight: bold;
				background-color: red;
				color: black;
				padding: 0.2rem;
				margin-bottom: 0.04rem;
				opacity: 0.8;
			}

			div.titelzeile {
				float: left;
				max-width: 48%;
				font-size: 0.9em;
				font-weight: lighter;
			}

			div.preview {
			}
			div.preview div.BildLink {
				float: left;
				margin: auto 1rem auto auto;
				position: relative;
			}
			div.preview img {
				width: 400px;
				max-width: 100%;
			}
			
			/* ---- Termine ---- */
			
			
			.termine .abohinweis {
				color: white;
			}
			.termine .uhrzeit {
				color: white;
			}
			.termine .jahr {
				color: #ddd;
				clear: both;
				border-bottom: 1px solid #ddd;
				padding-top: 1em;
				
			}
			.termine .uhrzeit {
				color: white;
			}
			.termine div.datum {
				clear: both;
				border-right: 1px solid #ddd;
				float: left;
				padding: 0 1rem 0 0;
				margin: 1rem 1rem 0rem 0;
				min-width: 8.5rem;
			}
			.termine div.datum p {
				color: white;
				font-size: 2.5rem;
				line-height: 3.5rem;
				padding: 0;
				margin:0;
				text-align: right;
			}
			.termine div.details{
				margin: 0;
				float: left;
				color: white;
			}
			
			.termine .anlass {
				color: white;
				margin: 1rem auto 0 0;
				font-size: 1.5rem;
			}
			.termine .termindetails {
				color: white;
				margin-top: 0.1rem;
			}
			.termine .terminuhrzeit {
				color: white;
			}
			.termine .termintrenner {
				color: white;
			}
			.termine .TerminSubline {
				color: white;
			}
			.termine .keineauftritte {
				color: white;
			}
			
			div.albumaussen {
				width: 95%;
				margin-left: auto;
				margin-right: auto;
			}
			div.album {
				position: fixed; 
				width: 95%;
				top: 1em;
				vertical-align: center;
				display: block;
				transition: max-height 3s;
				max-height:1em;
				/*background-color: red;*/
			}
			div.album.sichtbar {
				display: block;
				overflow: hidden;
				
			}
			
			div.thumb {
				float: left;
				max-width: 125px;
				margin: 0.2rem;
			}
			
			p.galeriennochmehr {
				text-align: center;
				background-color: #595959;
				font-size: 1.5rem;
				padding: 0.1rem 0;
				box-shadow: 0.5rem 0.5rem 1rem #151515;
				border-radius:1rem;
			}
			p.galeriennochmehr a:hover {
				text-decoration: none;
				border: none !important;
			}
			
			img.img80 {
				max-width: 80%;
			}
			
			
			div.details .Hinweis {
				background-color: blue;
				font-weight: bold;
				color: white;
				font-size: 0.8em;
				padding: 0em 0.2em 0em 0.2em;
			}
			div.details .Hinweis.Heute {
				background-color: #e1c000;
			}
			
			/* -------- Album-Seite (bilders.inc) ---- */
			
			p.eventdatumalbum {
				text-align: center;
				font-size: 1.5rem;
				margin-top: -1rem;
				margin-bottom: 2rem;
			}
			
			
			/*
				außerdem noch....
			bgOrange f1klein 
			f1klein fMorgen
			f1klein fMorgen
			
			pix09  f10
			f10
			f20
			*/


	
}

/*

orientation
    Gilt sowohl für den Desktop-Monitor als auch für mobile Geräte: Wenn der Viewport höher als breit ist, gilt orientation: portrait. orientation: landscape trifft dementsprechend zu, wenn die Breite des Viewports größer als die Höhe des Viewport ist. 
resolution (min-resolution / max-resolution)
    Auflösung des Geräts in DPI (Dots per Inch) oder DPCM (Dots per Centimeter)

@media only screen and (max-width:599px) {
	body {
		width: 320px; font-size: 0.8rem; 
	}
}

@media only screen and (min-width:600px) (max-width:920px){
	body { width: 90%;
	}
}
*/

@media screen {
	.wrapinnen div.box.flaechig {
		box-shadow: 0.2rem 0.2rem 1rem #333;
		position: relative;

	}
}
/* wenn breit, dann Menü sticky: */
@media screen and (min-width:1000px) {

	.menuoben {
				position: sticky;
				top: 0.2em;
				z-index: 10; /* sonst schiebt sich das Plakat drüber */
				}
}


/* schmaler Schirm */

@media screen and (max-width:900px) {

div.BildFlaechen {							
  left: 0;;
  top: 0;
  }

	.termine div.datum {
		clear: both;
		border-right: none;
		/*! float: none; */
		padding: 0px;
		margin: 0.2rem 0rem 0rem 0;
		min-width: 0;
	}

	.termine div.datum p {
		color: white;
		font-size: 2rem;
		line-height: 3.5rem;
		padding: 0;
		margin:0;
		text-align: right;
	}			

	.termine div.details {
		margin: 0;
		float: left;
		color: white;
		margin-left: 1em;
		clear: both;
	}


	.termine .anlass {
		color: white;
		margin: 0rem auto 0 0;
		font-size: 1.3rem;
	}

	div.titelzeile span.titel {
		font-size: 1.5rem;
		color: white !important;
	}

	div.titelzeile {
		float: left;
		max-width: 88%;
	}

	.f5mega,
	h1 {
		font-size: 2.2rem;
	}

.f4maxi	,
	h2 {
		font-size: 1.8rem;
		padding-top: 0.8em;
	}
}