/* ===== KS Reputation Layout – angepasst an dein Forum ===== */

/* Scrollbar */
#ks-container *::-webkit-scrollbar { 
	width: 8px; 
	height: 8px; 
} 
#ks-container *::-webkit-scrollbar-track { 
	background: none; 
}
#ks-container *::-webkit-scrollbar-thumb { 
	background: #3d8592;  /* Foren-Akzent */
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); 
	border-radius: 10px;
} 
#ks-container *::-webkit-scrollbar-button { 
	width: 0px; 
	height: 0px; 
} 

/* Typo-Akzente */
#ks-container strong { 
	color: #baf7f7;        /* Linkfarbe / Akzent hell */
	letter-spacing: 1px; 
} 
#ks-container em { 
	color: #a3c7c7;        /* Hoverfarbe / Akzent soft */
	letter-spacing: 1px; 
} 

/* Wrapper/Container */
#ks-wrapper {
	display: flex;
	justify-content: center; 
} 

#ks-container { 
	width: 550px; 
	background: #202a2a; 
	background-image: linear-gradient(#202a2a, #141a1a); 
	font-family: Tahoma, Verdana, Arial, Sans-Serif; 
	font-size: 13px; 
	line-height: 1.4;
	color: #e8eded;
	border: 1px solid #2c3636;
} 

/* Header */
#ks-header { 
	width: 550px; 
	height: 300px;
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	background: url(https://s1.directupload.eu/images/251125/9k6nfuyy.png) no-repeat center;
	/* wenn du ein cyan headerbild hast, hier austauschen */
} 

#ks-headline { 
	font-family: 'Asimovian', sans-serif; 
	color: #e8eded; 
	font-size: 60px; 
	text-transform: uppercase;
	letter-spacing: 2px;
} 

#ks-subtitle { 
	font-family: Tahoma, Verdana, Arial, Sans-Serif; 
	color: #a3c7c7; 
	font-size: 10px; 
	text-transform: uppercase; 
	font-weight: 700; 
	letter-spacing: 2px; 
} 

/* Main Layout */
#ks-main { 
	width: auto; 
	margin: 0px 30px 20px; 
	display: flex; 
	flex-direction: column; 
	gap: 30px; 
} 

.ks-heading { 
	width: auto; 
	font-family: 'Asimovian', sans-serif; 
	color: #baf7f7; 
	font-size: 35px; 
	margin-bottom: -45px; 
	z-index: 10; 
	padding: 0 10px; 
	text-transform: uppercase;
	letter-spacing: 1px;
} 
.ks-right { text-align: right; } 
.ks-center { text-align: center; } 

.ks-content { 
	display: flex; 
	background: #141a1a; 
	color: #e8eded; 
	font-weight: 400; 
	line-height: 1.5em; 
	font-size: 13px; 
	border: 1px solid #2c3636;
} 

/* Charakterspalte */
.ks-character { 
	display: flex; 
	flex-direction: column; 
	gap: 0px; 
} 

.ks-image { 
	width: 180px; 
	height: 300px; 
	background: #202a2a;
	border-right: 1px solid #2c3636;
} 
.ks-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display:block;
}

.ks-facts { 
	width: 180px; 
	display: flex; 
	justify-content: center; 
	margin: 0; 
}

.ks-facts ul { 
	list-style-type: none;
	margin: 0; 
	padding: 0; 
	width: 100%; 
	text-align: center; 
} 

.ks-facts li { 
	background: #213030;     /* trow_sep look */
	color: #baf7f7;          /* Akzent hell */
	margin: 5px 0;
	text-transform: uppercase; 
	font-weight: 600; 
	font-size: 11px; 
	letter-spacing: 1px; 
	border: 1px solid #2c3636;
	padding: 4px 2px;
} 

/* Textbereiche */
.ks-text { 
	max-height: 450px; 
	margin: 50px 30px 20px 0px; 
	padding: 0 10px 20px 20px; 
	overflow: auto; 
	width: 250px; 
	text-align: justify; 
	color: #e8eded;
}

.ks-info { 
	margin: 20px 10px; 
	padding: 0 10px; 
	max-height: 210px; 
	overflow: auto; 
	text-align: justify; 
	color: #e8eded;
}

/* Footer */
#ks-footer { 
	background-color: #141a1a; 
	padding: 10px 20px; 
	display: flex; 
	justify-content: space-between; 
	width: auto; 
	color: #a3c7c7;
	text-transform: uppercase; 
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1px; 
	border-top: 1px solid #2c3636;
} 

#ks-footer a:link, 
#ks-footer a:visited { 
	text-decoration: none; 
	color: #baf7f7; 
	transition: color 0.3s ease; 
}
#ks-footer a:hover { 
	color: #a3c7c7; 
}