/* Content: Flexbox, Scrollbutton, Videocontainer, Überschrifen */



/*-- Scrollbutton ---------------*/
html {
     scroll-behavior: smooth;
}

.stop-scrolling {	/* Stopt scollen eines kleinen  Bildschirmes, wenn das Menü angezeigt wird. */
    height: 100%;
    overflow: hidden;
}


.seiteUp	{
	text-align: center
	position: absolute;
	left: 100%;
	margin-right: 5px;
	width: 0.8em;
	height: 0.9em;
	cursor: pointer;
	background-color: white;
	border: 1px solid #8C8C8C; 
	color: #8C8C8C;
	opacity: 0.7;
	font-size: 2rem;
	position: sticky;
	top: 90%;
	z-index: 30;
}
/*-- Scrollbutton ----------------*/

.redline	{
	width: 100%;
}

a, p, li, td, details, summary  { 
	font-family: sans-serif; 
	hyphens: auto;	/* automatische Silbentrennung */
}

p {
	padding-bottom: 0.8em;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
	font-weight: bold;
}

a.ali:link	{
	color: #BC2024;
	text-decoration: none;
}

a.ali:hover {
	font-weight: bold;
	text-decoration: none;
}

a.ali:visited	{
	color: #BC2024;
	text-decoration: none;
}

a.ali::before {
		color: #BC2024;
		font-weight: 1000;
		content: '>'; 
		margin-right: 4px;
}


li, td   { 
		font-size: 0.8em;
}

.textblock, details {	/* nur für Testzwecke */
	font-family: sans-serif; 
	line-height: 1.8em;
	font-size: 90%; /*0.8em;*/
}

.textblock a.anker::before {
	content: '';
}

.textblock a {
	color: #BC2024;
	text-decoration: none;
}

.textblock a:before {
		color: #BC2024;
		font-weight: 1000;	
		content: '>'; 
		margin-right: 4px;
}

.textblock a:hover {
	font-weight: bold;
}

.btn_zurueck	{	/* Retour Button*/
    background-color: white;
    width: 120px;	
	border:1px solid silver;
	color: grey;
  	cursor: pointer;
} 




@media screen and (min-width: 500px) {
	li, td   { 
			font-size: 0.8em;
	}

	.textblock, details {	/* nur für Testzwecke */
		font-family: sans-serif; 
		line-height: 1.8em;
		font-size: 90%; /*0.8em;*/
	}

	.quer-NullRand	{
		width: 50%;
		height: auto;
		display: block;	/* Bild erzeugt sonst einen Abstand zum div Container */
	}

	.imgzitat	{
		visibility: visible;
	}
}




@media screen and (max-width: 799px) {
	.karte	{
		width: 100%; 
		height: 300px;
	}
	
	.btn_EN	{	/* Button Englische Seite*/
		font-size: 0.7em;
		position: absolute;
		width: 25px;
		top: 30px;
		right: 60px;
		background-color: white;
		border:1px solid silver;
		color: grey;
	  	cursor: pointer;
	  	z-index: 30;
	} 

	/* Video Container ---------------------------------*/
	.video-wrapper {
	    position: relative;
	    padding-bottom: 40px;
	    padding-top: 10px;
	    height: auto;
	    overflow: hidden;
	}
	.video-wrapper iframe,
	.video-wrapper object,
	.video-wrapper embed {
	    position: absolute;
	    top: 0;
	    left: 0;	
	    width: 100%;
	    height: 100%;
	}
	/* Video Container ---------------------------------*/

	/* Container Veranstaltungen ----------------------*/
	.veranst{
		position: relative; 
		width: 100%; 
		background-color: white;
	}
	.Pfeil-links{
		position: relative; 
		z-index: 20; 
		top: -186px; 
		width: 20px; 
		left: 0.4rem; 
		font-size: 3rem; 
		color: silver;
	}
	.Pfeil-rechts {
		position: relative; 
		z-index: 20; 
		top: -214px; 
		margin-right: 3rem; 
		width: 20px; 
		font-size: 3rem; 
		color: silver;
	}
	/* Container Veranstaltungen ----------------------*/

	.Ured01	{ 	/* Überschrift */
		font-family: sans-serif; 
		font-size: 1rem; 
		line-height: 2;
		color: #A3221F;
	}
	h1,.Ured02 { 	/* Überschrift 01 */
		font-family: sans-serif; 
		font-size: 1.1em; 
		line-height: 1.7;
		color: #a3221f;
	}
	.Ublack01	{ 	/* Überschrift */
		font-family: sans-serif; 
		font-size: 1em; 
		line-height: 2;
		color: #757575;
	}
	.Ublack02 { 	/* Überschrift 01 */
		font-family: sans-serif; 
		font-size: 1em; 
		line-height: 1.7;
		color: black;
	}
	.hoch	{
		width: 40%;
		height: auto;
		margin-left: 7px;	
		margin-bottom: 7px;	
	}
	.quer	{
		width: 100%;
		height: auto;	
		margin-bottom: 7px;	
	}
	.quer-NullRand	{
		width: 100%;
		height: auto;	
		display: block;	/* Bild erzeugt sonst einen Abstand zum div Container */
	}
	.imgzitat	{
		visibility: hidden;
	}
	.zurueck	{	/* Retour Button*/
		position:	relative;
		padding-top: 10px;
		padding-left: 4%;
		margin-left: 5em;
	
	}
}







@media screen and (min-width: 800px) {
	.karte	{
		width: 80%; 
		height: 300px;
	}

/*	.btn_EN	{	/* Button Englische Seite - wird im großen Menü nicht angezeigt*/
/*		position: absolute;
		width: 80px;
		top: 3.4em;
		right: 0px;
		background-color: white;
		border:1px solid silver;
		color: grey;
	  	cursor: pointer;
	} 
*/

	/* Video Container ---------------------------------*/
	.video-wrapper {
	    position: relative;
	    padding-bottom: 40px;
	    padding-top: 0px;
	    height: auto;
	    overflow: hidden;
	}
	.video-wrapper iframe,
	.video-wrapper object,
	.video-wrapper embed {
	    position: absolute;
	    top: 0;
		left: 10%;	
	    width: 80%;
	    height: 80%;
	}
	.video-wrapper img{
	    position: absolute;
	    top: 0;
		left: 15%;	
	    width: 100%;
	    height: auto;
}
	/* Video Container ---------------------------------*/


	/* Container Veranstaltungen ----------------------*/
	.veranst{
		position: relative; 
		width: 80%;
		left: 10%;	
		background-color: white;
	}
	.Pfeil-links{
		position: relative; 
		z-index: 10; 
		top: -186px; 
		width: 20px; 
		left: 0.4rem; 
		font-size: 3rem; 
		color: silver;
	}
	.Pfeil-rechts {
		position: relative; 
		z-index: 10; 
		top: -210px; 
		margin-right: 3rem; 
		width: 20px; 
		font-size: 3rem; 
		color: silver;
	}
	/* Container Veranstaltungen ----------------------*/



	.Ured01	{ 	/* Überschrift */
		font-family: sans-serif; 
		font-size: 2em; 
		line-height: 2;
		color: #A3221F;
	}
	h1,.Ured02	{ 	/* Überschrift 01 */
		font-family: sans-serif; 
		font-size: 1.3em; 
		line-height: 1.5;
		color: #a3221f;
	}
	.Ublack01	{ 	/* Überschrift */
		font-family: sans-serif; 
		font-size: 2em; 
		line-height: 2;
		color: #757575;
	}
	.Ublack02 { 	/* Überschrift 01 */
		font-family: sans-serif; 
		font-size: 1.2em; 
		line-height: 1.5;
		color: black;
	}
	.hoch	{
		width: 25%;
		margin-left: 6px;
		margin-bottom: 2px;
		height: auto;	
	}
	.quer	{
		width: 35%;
		margin-left: 6px;
		margin-bottom: 2px;
		height: auto;	
	}
	.quer-NullRand	{
		width: 50%;
		height: auto;
		display: block;	/* Bild erzeugt sonst einen Abstand zum div Container */
	}
	.imgzitat	{
		visibility: visible;
	}
}

/*
@media screen and (min-width: 1001px) {
	.textblock, details {	/* nur für Testzwecke */
/*		font-family: Lato, Helvetica, Roboto, sans-serif; 
		line-height: 1.6em;
		font-size: 90%; /*0.9em; */
/*	}
}
*/