/* Layout für den eigenen Player */
.audio-container {
	width: 100%;
	height: 100%;  
	
	/* Verhindern, dass das audio über die abgerundeten Ecken hinausgeht */
	border-radius: 10px;  /* Gleicher Wert wie der Container */
	display: flex;
	justify-content: center; /* Horizontale Zentrierung */
	align-items: center; /* Vertikale Zentrierung */
}

.controls {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 10px 0 20px;
	width: 100%;
}

.audio-wrapper:hover .controls {
	opacity: 1; /* Steuerleiste wird sichtbar, wenn die Maus über dem audio ist */
}

.audio-wrapper:fullscreen .controls,
.audio-wrapper:-webkit-full-screen .controls {
	opacity: 1 !important;
	display: flex !important;
}


.btn-custom {
	font-size: 16px; /* Größere Icons */
	width: 40px; /* Etwas größer */
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff; /* Weißere Umrandung */
	background: rgba(255, 255, 255, 0.1); /* Leichte Hintergrundaufhellung */
	color: red; /* Reines Weiß */
	font-weight: bold; /* Dickere Icons */
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8); /* Leuchtender Effekt */
	transition: all 0.3s ease;
	cursor: pointer;
}

.btn-custom:hover {
	color: #ffeb99; /* Helles weiss beim Hover für mehr Kontrast */
	border-color: red;
	text-shadow: 0px 0px 10px rgba(255, 235, 153, 1);
}


/* Anpassung für den roten Punkt im Lautstärkeregler */
#volumeSlider::-webkit-slider-thumb {
	appearance: none;
	width: 15px;
	height: 15px;
	background: red; /* Roter Punkt */
	border-radius: 50%;
	cursor: pointer;
	border: none; /* Entfernt den Standardrahmen */
}

#volumeSlider::-moz-range-thumb {
	width: 15px;
	height: 15px;
	background: red; /* Roter Punkt */
	border-radius: 50%;
	cursor: pointer;
	border: none; /* Entfernt den Standardrahmen */
}

#volumeSlider::-ms-thumb {
	width: 15px;
	height: 15px;
	background: red; /* Roter Punkt */
	border-radius: 50%;
	cursor: pointer;
	border: none; /* Entfernt den Standardrahmen */
}

.volume-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Lautstärkeregler standardmäßig ausblenden */
#volumeSlider {
	width: 180px;
	height: 4px;
	background: #555;
	appearance: none;
	cursor: pointer;
	border-radius: 2px;
	display: block;
}




/* Layout für die Anzeige der Sender und Songdaten */

.highlight {
	color: red; /* Hier kannst du die gewünschte Farbe setzen */
	font-family: 'Bradley Hand ITC', cursive;
	
	font-style: italic; /* Kursiv */
	font-size: 30px;
}

/* Reduziere die Größe der Bilder */
.radio-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}


/* Keine Abstände zwischen den Karten */
.radio-card {
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}

.radio-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
}

/* Player Layout */
.player-info {
	flex-grow: 1;
	text-align: left;
	font-size: 0.9rem;
}

.player-title {
	font-size: 1.2rem;
	font-weight: bold;
	color:red;
	display: inline-block;
}

.player-icon {
	font-size: 1.5rem;
	margin-left: 0px;
	vertical-align: middle;
}

#songInfo {
	font-size: 1rem;
	color: white;
}

#releaseYear {
	font-size: 1.15rem;
	color: #d0d0d0;
}


/* Modale und Player */

body.modal-open::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8); /* Hier kannst du die Dunkelheit anpassen */
	z-index: 1040; /* Muss niedriger sein als das Modal (Bootstrap nutzt 1050 für das Modal) */
}

.modal-content {
	background-color: rgba(0, 0, 0, 0.9) !important; /* Dunklerer Hintergrund */
	color: white;
	border: 2px solid red;
	border-radius: 10px; 
	overflow: hidden; 
	box-shadow: 0 0 35px rgba(255, 100, 100, 0.6); /* Heller roter Schimmer */	
}

.btn-close-white {
	filter: invert(1);
}

/* Header-Anpassung für bessere Ausrichtung */
.modal-header {
	display: flex;
	align-items: center;
	gap: 10px; /* Abstand zwischen Icon und Titel */
	background-color: #333;
	border-bottom: none;
	
}

/* Icon-Größe anpassen */
.player-icon img {
	height: 40px; /* Höhe des Headers */
	width: auto; /* Automatische Breite */
	border: 2px solid red;
	border-radius: 10px; 
	overflow: hidden;
}

/* Lautstärkeregler in einer Zeile mit Icon und Titel */
.volume-control {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Steuerleiste Player */
.modal-footer {
	background-color: #191919;
}
.modal-footer audio {
	width: 100%;
	display: block;
}

.custom-close {
	position: relative;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.custom-close::before,
.custom-close::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 24px;
	height: 3px;
	background-color: red;
	transition: 0.3s ease-in-out;
}

.custom-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.custom-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.custom-close:hover::before,
.custom-close:hover::after {
	background-color: white; /* Ändert die Farbe beim Hover */
}