body{
		font-family: "DM Serif Display", serif;
		font-size: 1.5vw;
		background-image:url("../grfx/bg4_low.png");	
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 80%;
		background-color: black;
		background-position: center; 
	}
	
	#menu li {
		display:inline-block;
		padding: 9px 18px;
	}
	#menu li a{
		text-decoration:none;
		border-style:none;
		color: white;
		font-weight:800;
		line-height:1.5;
		text-transform:uppercase;
		outline:none;
		text-shadow: 2px 2px black;
	}
	#menu li a:hover{
		border-bottom:4px solid #f6dfad;
	}
	
	#menu li a:focus{
	}
	#menu li.active > a{
		border-bottom:4px solid #f6dfad;
	}
	
	#menu{
		position:fixed;
		z-index: 70;
		right:20px;
		bottom: 0px;
	}
	
	
	
	.box{
background: rgb(0,0,0,0.5);

		position:absolute;
		width:60%;
		height:55%;
		top:20%;
		left:20%;
		padding: 10px;
		border-radius: 10px;
		overflow-y: auto;
	}
	
	.box_transparent_center{
		text-align:center;
		height:100%;
		background: rgba(181,61,47,0.2);
	}
	
	.box2{
background: rgb(0,0,0,0.5);
		color:white;
		text-shadow: 1px 1px black;
		position:absolute;
		width:80%;
		height:70%;
		top:15%;
		left:10%;
		padding: 10px;
		border-radius: 10px;
		overflow-y: auto;
	}
	
	.rightbox{
		background: rgba(96,5,5,0.8);
		color:white;
		position:absolute;
		width:40%;
		height:55%;
		top:20%;
		right:0%;
		padding: 10px;
		border-radius: 10px;
		overflow-y: auto;		
	}
	
	h1{
		color:#b8a493;
		font-size:1.8vw;
		text-transform:uppercase;
		margin-bottom: 0px;
		padding-bottom:0px;
	}
	
	h2{
		font-size:1.5vw;
		color:#f6dfad;
		text-transform:uppercase;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-bottom:10px;
	}
	
	h3{
		font-size:1.3vw;
		color:#fbeccd;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-bottom:0px;
	}	
	
	h4{
		font-size:1.1vw;
		color:white;
		margin-bottom: 0px;
		margin-left: 0px;
		padding-bottom:10px;
	}
	
	a{
		color:white;
		text-decoration:none;
		font-style:italic;
	}
	
	a:hover{
		text-decoration:underline;
	}
	
	div.about_pic{
		width:100%;
		margin:auto;
		text-align:center;
	}
	
	.social-icons{
		position:fixed;
		z-index: 70;
		bottom: 20px;
		left:20px;
	}
	
	table.events{
		font-size: 1.1vw;
	}
	
	.event_entry{
		color:white;
		vertical-align: top;
	}
	
	.event_entry_prev{
		color:white;
		text-shadow: 1px 1px black;
	}
	
	.event_header{
		color:#fded33;
	}
	
	.event_day{
		color:yellow;
	}
	
	.event_day_blink{
		color:yellow;
		animation: animate 0.5s linear infinite;
	}
	
	.event_img{
		border:1px solid black;
	}
	
	@keyframes animate{
		 0%{
			 opacity: 0.5;
		 }
		 50%{
			 opacity: 1;
		 }
		 100%{
			 opacity: 0.5;
		 }
	 }
	
	.player_control_panel{
		width:900px;
		height:140px;
		padding:5px;
		background: rgb(0,0,0);
		background-color:black; -- linear-gradient(90deg, #b53d2f 0%, #000000 100%);
		 background-repeat: no-repeat;
			background-position: center;
			background-size: cover; 
		
	}
	
	.player_control_panel_cont1{
		padding-left:120px;
		padding-top:10px;
	}
	
	.player_control_band{
		color:#fded33;
		font-size:18px;
		text-align:center;
	}
	
	.player_control_title{
		color:white;
		font-size:24px;	
		text-align:center;
	}
	
	.player_control_progressbar{
		font-size:12px;
		color:white;
		float:left;
	}
	
	input.player_progressbar{
		width:650px;	
		cursor:pointer;
	}
	
	.player_play{
		cursor:pointer;
	}
	
	.player_control_picture{
		background-image:url("../grfx/fitk_background.png");
		 background-repeat: no-repeat;
			background-position: left;
			background-size: contain;
			background-color:black;
			
			width:450px;
			height:390px;
			float:left;
	}
	
	.player_control_playlist{
			width:450px;
			height:390px;
			float:left;
		 background-repeat: no-repeat;
			background-position: left;
			background-size: cover;    
			color:white;
			padding:5px;
			font-size:16px;
			overflow:scroll;
	}
	
	.player_control_playlist_odd_line{
		margin:5px;
	}
	.player_control_playlist_even_line{
		margin:5px;	
	}
	.player_control_playlist_selected_line{
		background-color:#b53d2f;
		color:black;
	}
	.player_control_playlist_hover_line:hover{
		background-color:#fded33;	
		cursor:pointer;
	}
	.player_control_playlist_icon{
		margin-right:5px;
	}
	
	.player_next_prev{
		cursor:pointer;
	}
	
	.press_thumb{
		border-radius: 18px;
	}
	
	.photos_thumb{
			border-radius: 18px;
	}
	
	.intro{
		color:#faf5cd;
		font-size:6vw;
		text-shadow: 2px 2px black;
		display:none;
		position:absolute;
		width:80%;
		height:60%;
		top:30%;
		left:15%;
		padding: 10px;
	}
	
	.band{
		font-size:24px;
	}
	
	.news_bandfoto{
		border:1px solid white;
		width:300px;
	}
	.bandfoto{
		border:1px solid white;
		width:600px;
	}
	
	.photo_head_text{
		font-size:12px;
	}
	
.banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 15px 30px;
  font-family: sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  
  /* Animation zuweisen: Dauer 4s, läuft unendlich (oder passe es an) */
  animation: bannerAnimation 4s ease-in-out forwards;
}

/* Keyframes für die Animation */
@keyframes bannerAnimation {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px); /* Startet leicht oberhalb und unsichtbar */
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0);     /* Nach 15% der Zeit voll da (Einfliegeffekt) */
  }
  85% {
    opacity: 1;
    transform: translate(-50%, 0);     /* Bleibt bis 85% der Zeit sichtbar */
  }
}

@media screen and (max-width: 1023px) {
	body{
		background-image:url("../grfx/bg_smartphone.png");	
		background-size: auto;
	}
	div.menu_div{
		max-width:50%;
		overflow: hidden;	
		background-color:red;
	}
	#menu{
		float:left;
		
	}	
	#menu li a {
		font-size:1rem;
	}	
	.social-icons{
	display:none;
	}	
	table.events{
		font-size: 1rem;
	}	
	h1,h2,h3,h4,a{
		font-size:1rem;
	}
	
	.box{
		width:100%;
		height:55%;
		top:20%;
		left:0%;
	}	
	.box2{
		width:100%;
		height:67%;
		top:15%;
		left:0%;
		font-size:1rem;
	}	
		
	.player_control_panel{
		background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(181,29,13,1) 100%);
	}
	
	.player_control_band{
		color:#f94c57;
		font-size:18px;
		text-align:left;
		margin-left:80px;
	}
	
	.player_control_title{
		color:white;
		font-size:24px;	
		text-align:left;
		margin-left:70px;
		padding-left:10px;
	}
	
	.player_control_progressbar{
		font-size:12px;
		color:white;
		float:left;
	}
	
	input.player_progressbar{
		width:300px;	
		cursor:pointer;
	}
	

	
	
	.player_control_playlist{
			height:300px;
			
	}
	
	.player_control_panel_cont1{
		padding-left:0px;
		padding-top:10px;
	}
	
	.news_bandfoto{
		border:1px solid white;
		width:70%;
	}
	
	.bandfoto{
		border:1px solid white;
		width:70%;
	}	
	
	.photo_head_text{
		font-size:12px;
	}
}