html {
  font-family: "Lucida Sans", sans-serif;
}


/* Responsive Design */
{
		[class*="col-"] {
		  padding: 5px;
		}
		/* For mobile phones: */
		[class*="col-"] {
		  width: 100%;
		}
	@media screen and (min-width: 300px) {
		  /* media onlyFor tablets: */
		  .col-a-1 {width: 8.33%;background-color: white;z-index:12;}
		  .col-a-2 {width: 16.66%;background-color: white;z-index:12;}
		  .col-a-3 {width: 25%;background-color: white;z-index:12;}
		  .col-a-4 {width: 33.33%;background-color: white;z-index:12;}
		  .col-a-5 {width: 41.66%;background-color: white;z-index:12;}
		  .col-a-6 {width: 50%;background-color: white;z-index:12;}
		  .col-a-7 {width: 58.33%;background-color: white;z-index:12;}
		  .col-a-8 {width: 66.66%;background-color: white;z-index:12;}
		  .col-a-9 {width: 75%;background-color: white;z-index:12;}
		  .col-a-10 {width: 83.33%;background-color: white;z-index:12;}
		  .col-a-11 {width: 91.66%;background-color: white;z-index:12;}
		  .col-a-12 {width: 100%;background-color: white;z-index:12;}

		}
		
		@media screen and (min-width: 600px) {
		  /* media only For tablets: */
		  .col-s-1 {width: 8.33%;background-color: white;z-index:12;}
		  .col-s-2 {width: 16.66%;background-color: white;z-index:12;}
		  .col-s-3 {width: 25%;background-color: white;z-index:12;}
		  .col-s-4 {width: 33.33%;background-color: white;z-index:12;}
		  .col-s-5 {width: 41.66%;background-color: white;z-index:12;}
		  .col-s-6 {width: 50%;background-color: white;z-index:12;}
		  .col-s-7 {width: 58.33%;background-color: white;z-index:12;}
		  .col-s-8 {width: 66.66%;background-color: white;z-index:12;}
		  .col-s-9 {width: 75%;background-color: white;z-index:12;}
		  .col-s-10 {width: 83.33%;background-color: white;z-index:12;}
		  .col-s-11 {width: 91.66%;background-color: white;z-index:12;}
		  .col-s-12 {width: 100%;background-color: white;z-index:12;}

		}
		@media screen and (min-width: 768px) {
		  /* media onlyFor desktop: */
		  .col-1 {width: 8.33%;background-color: white;z-index:12;}
		  .col-2 {width: 16.66%;background-color: white;z-index:12;}
		  .col-3 {width: 25%;background-color: white;z-index:12;}
		  .col-4 {width: 33.33%;background-color: white;z-index:12;}
		  .col-5 {width: 41.66%;background-color: white;z-index:12;}
		  .col-6 {width: 50%;background-color: white;z-index:12;}
		  .col-7 {width: 58.33%;background-color: white;z-index:12;}
		  .col-8 {width: 66.66%;background-color: white;z-index:12;}
		  .col-9 {width: 75%;background-color: white;z-index:12;}
		  .col-10 {width: 83.33%;background-color: white;z-index:12;}
		  .col-11 {width: 91.66%;background-color: white;z-index:12;}
		  .col-12 {width: 100%;background-color: white;z-index:12;}

		}
		
		/*@media (min-width: 270px) and (max-width: 480px) 
		{
		.div-font{font-size:8px}
			}
		*/
}

/* Header */
#BildUnwichticker
{
	display: block;
	margin-left: auto; 
	margin-right: auto;
}

#MenueBereich
{
	display: block;
	margin: auto; 
}




		.header 
		{	/*  float: left;[PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */
		  
		  margin-left: auto;
		  margin-right: auto;
		  width:100%;
		  background-color: #ffffff;
		  	position: -webkit-sticky;
			position: sticky;
			top: 0;
		  z-index:12;
		}
	
.ButtonUebernehmen
	{			
	display: block;
	  top: 0;
	  text-align: center;
	position: -webkit-sticky;
	position: sticky;
	z-index:14;
	}
	
.ButtonUebernehmenAbbrechen
	{			
	display: inline;
	  top: 0;
	position: -webkit-sticky;
	position: sticky;
	z-index:14;
	}
	
	
	#buttonFilterUebernehmen
	{
	display: none;
	}
	
	#buttonFilterUebernehmenAbbrechen
	{
	display: none;
	}
	
.ButtonLiRe
	{			
		border: none;
		color: white;
		text-align: center;
		text-decoration: none;
		width: auto;
		font-size: 16px;
		border-radius: 6px;
		padding: 0px 5px 0px 5px;
	    margin-top: 0px;
		margin-bottom: 5px;
		z-index: -10;

	}
	
.ButtonLi
	{		
display: inline;	
	  background-color: #FEBE00; /* Green */
	  width: 50px;
	  border: none;
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  font-size: 14px;
	  border-radius: 5px;
	  padding: 5px 5px 5px 5px;
	margin:0px 5px 0px 5px;
	}
	
.ButtonRe
	{		
display: inline;	
	  background-color: #FEBE00; /* Green */
		width: 50px;
		border: none;
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  font-size: 14px;
	  border-radius: 5px;
	  padding: 5px 5px 5px 5px;
	  margin:0px 5px 0px 5px;

	/*margin-right: auto;*/
	}
		
.Filtertooltip
{
	display: none;

    text-align: center;
    align-content: center;
	
	/* margin:0 0 0 0;z-index:12; */
}


.HauptbereichTickerUndKatze
{
	
	 height:550px;
}




	#MenueUnsortList
		{					/* Nur für Cookie /*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */

		list-style-type: none;
		display: table; 
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-top: 5px;
		padding-bottom: -5px;
		text-align: left;
		overflow: hidden;
		border: 2px solid #fafafa;
		background-color: #fafafa;
		}

		li 
		{					/*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */
		  
		  display: block;
		  margin: auto;
		  float: left;
		}


		li a 
		{				/*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */
		  display: block;
		  color: #666;/* #666;*/
		  text-align: center;
		  vertical-align: middle ;
		  padding: 3px 5px 0px 5px;
		  text-decoration: none;
		  		margin-left: auto;
				margin-right: 10px;
		  background-color: #fafafa ;
		}


		li a:hover:not(#active1) 
		{
		  background-color: #ddd; 
		}

		li img:hover:not(#active1) 
		{
		  background-color: #ddd; 
		}
		
		#active1 
		{
		  color: white;
		  background-color: #FEBE00;
		  border-radius: 6px;
		}
		
		#nummerwahl
		{
			padding: 3px 10px 0px 10px;
			margin:0px 5px 0px 5px;
			background-color: #fafafa ;		
		}
		
		.filterHoover:hover 
		{
			cursor: pointer;	
		}
		
		
		table  {border-spacing: 0px;}
		
		td {vertical-align: bottom;}
		
					
		#neusteNrBuchstabeNeu
		{
		font-size: 12px;
		position: relative;
		top: -4px;
		}


		#filterAufruf 
		{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 20px;
		padding: 0px 5px 0px 5px;
		margin: 0px 5px 0px 5px;
		}
	
		#filterreset 
		{
		color: green;
		display: inline;
		visibility: hidden;
		justify-content: center;
		align-items: center;
		height: 25px;
		border-radius: 5px;
		}
		
		#ButtonWuerfelUnten
		{
		transform: scale(0.6);
		overflow: clip;
		}
	
	
		#ButtonWuerfelMenue
		{
		 transform: scale(0.7);
		}
		
		
		#zufallWahl {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 20px;
		}

	
	/* Cookie */	
		.cookieNotice
		{
			border-radius: 6px;
			font-size: 11px;
			display: none ; 
			position: -webkit-sticky; /* Safari */
			position: sticky;   
			top: 0;
			background: linear-gradient(180deg, #cdcdcd, #9a9a9a);
			border: 4px solid #9a9a9a;
			margin: 20px;
			padding: 20px;
			width: 80%;
			z-index:10;
		}	
		
		.title-wrap
		{
		 padding: 0px;
		  margin: 0px;
		}

			.btn-primary
		{
		  vertical-align: top;
		  font-size: 11px;
		  text-align: center;
		  text-decoration: none;
		  font-size: 14px;
		}
			
			.btn-primary1
		{
		  background-color: #FEBE00; 
		  border: 2px solid #FEBE00;
		  color: white; 
		  border-radius: 2px;
		  padding: 5px 5px 5px 5px;
		  margin: 5px 5px 5px 5px;
		  width: auto;
		}
			
			.btn-primary2
		{
		  background-color: green; 
		  border: 2px solid green;
		  color: white; 
		  border-radius: 2px;
		  padding: 5px 80px 5px 80px;
		  margin: 5px 5px 5px 5px;
		  width: auto;
		}
					 /* Hoover the tooltip InputFeld TickerNummer */
		.btn-primary:hover 
		{
		   cursor: pointer;
		}
		
		.msg-wrap
		{
			font-size: 11px;
			padding: 2px 2px 2px 2px;	
			margin: 0px;
		}
			
		.cookievehicle2
		{
			font-size: 11px;
			color: grey;
		}
			
		.cookietext
		{
			line-height: 1.2;
			padding: 1px;	
			margin: 0px;	
		}
			
	/* allgemein*/	
		p 
		{		  
		margin-block-start: 1px;
		margin-block-end: 1px;
		}
		
		
	







/* Überschrift	*/	
#idUeberschrift
{
	text-align: center;
	min-height:20px;
	max-height: 65px;
	font-size: 12px;
	vertical-align: middle;
	padding: 10px 0px 10px 0px;
}

/* BildFormat 	*/	
#bildFormat
	{
	width:140px;
	height: 100px;
	transform: scale(1.0);
	}

/* Format */	
#GespraechsFormat
		{
		  text-align: center;
		  font-size: 12px;
		  padding: -5px 0px 5px 0px;
		  margin: 0px 0px 0px 0px;
		}	

/* Datum	*/	
#ErstellDatum
		{
		  text-align: center;
		  vertical-align: baseline;
		  font-size: 10px;
		  margin: 0px 0px 10px 0px;
		  /*position: relative;*/
		  /*top: 25px;*/
		}
		.itemTicker4DatumSterne
		{
		/*position: relative;*/	
		/*  top: -25px;	*/	
		}
/* Sterne 	*/	
		.classSterneAuszeichnung 
		{
		 font-size: 25px;
		 padding: 0px 0px 0px 0px;
		 margin: 0px 0px 0px 0px;
		 color: #FEBE00;
		 text-shadow: 2px 2px #140f00;
		 vertical-align: baseline;
		/* position: relative;*/	
		/* top: 40px;*/	
		}
		

/* Container Ticker */	


		

	.grid-containerAll 
		{
		min-height: 50px;
		height: 650;
		display: table; 
		margin: 0 auto;
		text-align: left;
		}
		
.itemTicker0 { grid-area: Leere; }
.itemTicker1 { grid-area: Ueberschrift; vertical-align: bottom; min-height: 50px; max-width: 250px;}
.itemTicker2 { grid-area: Bild;vertical-align: bottom; min-height: 80px; max-height: 120px; display: right; }
.itemTicker3 { grid-area: Format; text-align: center;}
.itemTicker4 { grid-area: Datum; text-align: center;}
.itemTicker5 { grid-area: Sterne;text-align: center;max-height: 10px; }
.itemTicker6 { grid-area: Text; }
.itemTicker7 { grid-area: Leere2; }

.grid-containerTicker 
	{
	  display: grid;
	  grid-template-areas:
		'Leere Ueberschrift Ueberschrift Ueberschrift Ueberschrift Ueberschrift Bild Bild Leere2'
		'Leere    Format        Format        Format      Format        Format  Bild Bild Leere2'
		'Leere    Datum         Datum         Datum       Datum         Datum   Bild Bild Leere2'
		'Leere    Sterne        Sterne        Sterne      Sterne        Sterne  Bild Bild Leere2'
		'Leere     Text          Text          Text        Text          Text   Text Text Leere2';
	  gap: 0px;
	  padding: 0px 2px 0px 2px;
	  max-width: 400px;
	  vertical-align: bottom;
	}

.grid-containerTicker > div 
	{
	  text-align: center;
	  padding: 0px 0;
	  vertical-align: middle;
	}
.SendeschlussClass
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

#sendeschlussBildID
	{
		position: absolute;
		top:240px;
		left:200px;
		display: none;
		visibility: hidden;
		margin-left: auto;
		margin-right: auto;
		max-width: 250px;
		max-height: 250px;
		
		z-index:-1;
	}
	
		
/* Markenlogo Copyright	*/	
		.class-Markenlogo 
	{
		margin: auto;
		font-size: calc(9px + (13 - 9) * ((200vw - 260px) / (1600 - 260)));
		grid-column: 2 / span 10;
		grid-row: 2 / span 1;
		max-width: 400px;
		 color:  #ffbe00;
		 background-color: white;
		 text-shadow: 1px 1px #140f00;
		/* font-weight: bold; */
	}


/* Container Katze */

.itemKatze0 { grid-area: Leer; }
.itemKatze1 { grid-area: BildKatzen; }
.itemKatze2 { grid-area: TextKatze; vertical-align: top; }
.itemKatze3 { grid-area: Leer2; }


.grid-containerKatze 
	{
	  display: table; 
    margin: 0 auto;
    text-align: left;
	display: grid;
	  grid-template-areas:
		'Leer BildKatzen BildKatzen TextKatze TextKatze TextKatze TextKatze Leer2 Leer2';
	  gap: 10px;
	  padding: 0px;
	  max-width: 400px;
	  vertical-align: top;
	}

.grid-containerKatze > div 
	{
	text-align: center;
	padding: 0px 0;
	vertical-align: top;
	}



#bildKatze
	{
	width:140px;
	height: 100px;
	transform: scale(0.7);
	}



	.textKatze
	{
		width: 100%;
		text-align: center;
		margin: 0px 0px 0px 0px;
		padding: 20px 0px 0px 0px;
	}

	img.bildKatze 
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}


/* Container Bedienleiste */

.itemBedienleiste0 { grid-area: Text01; margin: 5px; width: 80px; display: inline;}
.itemBedienleiste1 { grid-area: Fehler; margin: 0px; width: 10px; display: inline;}
.itemBedienleiste2 { grid-area: Ziffer;  margin: 0px 5px 0px 5px;width: 100px; display: inline;}
.itemBedienleiste3 { grid-area: Wuerfel; margin: 0px 0px 0px 0px;width: 60px; display: inline; }
.itemBedienleiste4 { grid-area: Leer02; }


.grid-containerBedienleiste 
	{
	  display: table; 
		margin: 0 auto;
		vertical-align: middle;

	  /* grid-template-areas:Text01 Ziffer Wuerfel Leer02;*/
	  gap: 2px;
	  padding:  0px 0px 0px 0px;
	  max-width: 350px;

	  /* z-index:-1; */

	}

.grid-containerBedienleiste > div 
	{
	text-align: center;
	padding: 0px 0;
	vertical-align: middle;

	}
/* Bild Würfel */ 
		  /* Position the tooltip Würfel*/
		.wuerfelclass 
		{

		  left: 0px;
		  top:10px;
		  display: inline;
		  font-size: 12 px;
		  cursor: pointer;
		  
		}
		  /* Position the tooltiptext Würfel*/
		.wuerfelclass .tooltiptext 
		{
		  visibility: hidden;
		  width: 90px;
		  background-color: #FEBE00;
		  color: white;
		  font-weight: bold;
		  text-align: center;
		  border-radius: 6px;
		  padding: 2px 0;
		  position: absolute;
		  z-index:1; 
			/*top:60%;*/
			/*left:100%;*/
		}
		  /* Hoover  tooltiptext Würfel*/
		.wuerfelclass:hover .tooltiptext 
		{
		  visibility: visible;
		  cursor: not-allowed;
		  
		}

/* Eingabefeld */ 
/* Nummernanzeige mit Eingabe der Nr*/ /*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */
		.TickerNummerInputfeld
		{
		  text-align: center;
		  font-size: 16px;
		  background-color:rgba(250, 194, 0, 0.1);
		  vertical-align: middle;
		  padding: 0px 0px 0px 0px;
		  margin: 0px 0px 0px 0px;
		  border-style: none;
		  border-radius: 5px;
		  border-color:rgba(250, 194, 0, 0.1); 
		  width:60px;
		  position: relative;
		  top: -3px;
	
		}


		 /* Hoover the tooltip InputFeld TickerNummer */
		.TickerNummerInputfeld:hover 
		{
		   cursor: pointer;
		}

		 /* Position the tooltip InputFeld TickerNummer */
		.TooltipInputType 
		{
		  position: relative;
		  display: inline;
		  vertical-align: middle ;
		  font-size: 12 px;
		}


		.TickerNummerInputfeldSubmit
		{
			visibility: hidden;
			width: 60px;
			background-color: #FEBE00;
			  border-color:rgba(250, 194, 0, 0.1); 
			color: white;
			text-align: center;
			font-weight: bold;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index:1;
			top:100%;
			left:10%;
		}



/* Rechtschreibung 	*/	
/* Position the tooltip Rechtschreibung */ /*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */
		.tooltipRechtschreibung 
		{
		  position: relative;
		  left: 0%;
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  /* z-index:1; */
		}

		/* Rechtschreibung (Schrift wird nichts bringen?!?! */
		.tooltipRechtschreibungBild
		{
		  display: block;
		  margin-left: auto;
		  margin-right: auto;
		  cursor: pointer;
		  
		}


		/* tooltip Rechtschreibung */
		.tooltipRechtschreibung .tooltiptextRechtschreibung 
		{
		  visibility: hidden;
		  width: 200px;
		  background-color: #FEBE00;
		  color: white;
		  font-size: 10px;
		  font-weight: bold;
		  text-align: center;
		  border-radius: 6px;
		  padding: 5px 0;
		  position: absolute;
		  /* z-index:1; */
			top:120%;
			left:50%;
		}
		
		/* tooltip Rechtschreibung */
		.tooltipRechtschreibung:hover .tooltiptextRechtschreibung 
		{
		  visibility: visible;
		  cursor: not-allowed;
		}
			



/* Footer */ /*  [PUNKT].class{} Selektor  //// [Lattenzaun] #id{} Selektor  ////  [Element] li oder ul (ohne irgendwas davor)  ////  [Stern]* UniversalSelektor  */

		.footer 
		{
		  margin-left: auto;
		  margin-right: auto;
		  text-align:center;
		  font-size: 15px;
		  width:100%; 
		}
		
		.FooterBereich
		{
		float: left;
		}	

		.impressum	
		{
		  margin-left: auto;
		  margin-right: auto;
		  text-align:center;
		  font-size: 15px;
		  font-family: "Lucida Sans", sans-serif;
		  font-family: Arial, Helvetica, sans-serif;
		  width:100%;	
		}		

		.impressum2	
		{
		  margin-left: auto;
		  margin-right: auto;
		  text-align:center;
		  font-size: 12px;
		  font-family: "Lucida Sans", sans-serif;
		  width:100%;	
		}