/* === Layout === */
html {
	margin: 0;
	padding: 0;
	background-color: #1f2a38;
	color: #e8edf3;
	font-family: 'Inter', 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

body {
	padding: 0 2rem;
	margin: 0 auto;
	max-width: 1200px;
	background-color: #1f2a38;
}

/* === Header === */
h1#header {
	background: url(/icecast.png) no-repeat 10px center;
	background-size: 44px;
	padding: 1.2rem 0 1.2rem 70px;
	font-size: 2rem;
	font-weight: 700;
	color: #ffffff;
	border-bottom: 2px solid #3b4759;
	margin: 1.5rem 0;
}

/* === Menü === */
#menu {
	background: #2b3a4b;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin-bottom: 2rem;
}

#menu ul {
	display: flex;
	justify-content: center;
	gap: 2rem;
	list-style: none;
	padding: 1rem;
	margin: 0;
}

#menu ul li a {
	color: #4ea1f3;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: background-color 0.2s;
}

#menu ul li a:hover {
	background-color: #3a4e64;
}

/* === Stream Box === */
.roundbox {
	background-color: #2b3a4b;
	border-radius: 10px;
	padding: 2rem;
	margin: 2rem auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mounthead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.mounthead h3 {
	font-size: 1.3rem;
	font-weight: 600;
	color: #4ea1f3;
	margin: 0;
}

.right {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}

.mountlist {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mountlist li a {
	background-color: #4ea1f3;
	color: #1f2a38;
	font-weight: 500;
	border-radius: 5px;
	padding: 0.4rem 0.8rem 0.4rem 2rem;
	text-decoration: none;
	position: relative;
	font-size: 0.9rem;
	transition: background-color 0.2s ease;
}

a.play {
	background-image: url(/tunein.png);
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 16px;
}

a.auth {
	background-image: url(/key.png);
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 16px;
}

.mountlist li a:hover {
	background-color: #6bb8ff;
}

/* === Audio Player === */
.audioplayer {
	margin-top: 1rem;
}

.audioplayer audio {
	width: 100%;
	max-width: 400px;
	border-radius: 6px;
	background-color: #1f2a38;
}

/* === Tabelle (yellowkeys) === */
table.yellowkeys {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	background-color: #1f2a38;
	border-radius: 8px;
	overflow: hidden;
}

table.yellowkeys td {
	padding: 0.75rem 1rem;
	vertical-align: top;
	border-bottom: 1px solid #3b4759;
}

table.yellowkeys td:first-child {
	width: 220px;
	font-weight: 500;
	color: #9ab1c8;
}

table.yellowkeys td:last-child {
	color: #e8edf3;
}

.streamstats a {
	color: #4ea1f3;
	text-decoration: none;
	border-bottom: 1px dotted #4ea1f3;
}

.streamstats a:hover {
	border-bottom: 1px solid #4ea1f3;
}

/* === Footer === */
#footer {
	text-align: center;
	font-size: 0.85rem;
	color: #8a99aa;
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid #3b4759;
}

/* === Responsive === */
@media (max-width: 768px) {
	body {
		padding: 1rem;
	}

	.mounthead {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.mountlist {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	h1#header {
		font-size: 1.6rem;
		padding-left: 60px;
		background-size: 36px;
	}

	#menu ul {
		flex-direction: column;
		gap: 1rem;
	}
}

/* === Admin NAV Leiste === */
ul.nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 1rem 0;
	margin: 1rem 0 0 0;
	background-color: #2b3a4b;
	border-radius: 8px;
}

ul.nav li a {
	background-color: #3a4e64;
	color: #e8edf3;
	padding: 0.5em 1em;
	border-radius: 6px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s;
}

ul.nav li a:hover {
	background-color: #4ea1f3;
	color: #1f2a38;
}

/* === Client Table (Admin > listclients.xsl) === */
.scrolltable {
	overflow-x: auto;
}

table.colortable {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	background-color: #1f2a38;
}

table.colortable thead {
	background-color: #3a4e64;
	color: #ffffff;
	font-weight: 600;
}

table.colortable td {
	border: 1px solid #3b4759;
	padding: 0.75rem;
	text-align: center;
	color: #e8edf3;
}

table.colortable tr:nth-child(even) {
	background-color: #253140;
}

table.colortable a {
	color: #4ea1f3;
	text-decoration: none;
	border-bottom: 1px dotted #4ea1f3;
}

table.colortable a:hover {
	border-bottom: 1px solid #4ea1f3;
}

/* === Paragraph Blocks (z. B. moveclients.xsl) === */
.roundbox p {
	background-color: #243041;
	color: #e8edf3;
	padding: 1rem;
	border-radius: 6px;
	margin: 1rem 0;
}

.roundbox a {
	color: #4ea1f3;
	font-weight: 500;
}

.roundbox a:hover {
	color: #6bb8ff;
}

/* === Code Element (moveclients.xsl Mount Info) === */
code {
	background-color: #38495e;
	color: #d0e2ff;
	padding: 0.2em 0.5em;
	border-radius: 4px;
	font-family: monospace;
}