/*
Hier werden Textfarbe am Chatstart und Systemtextfarbe angegeben.
Die Parameter werden mit PHO ausgelesen, deshalb bitte die Syntaxis beachten!
---------------------
Textfarbe:2c3e50
Systemfarbe:7f8c8d
---------------------
*/

/* for index.php - Login */
#body{
	text-align:center; 
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	color:#2c3e50; 
	background: linear-gradient(135deg, #ecf0f1 0%, #f8f9fa 50%, #ecf0f1 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Dynamischer Hintergrund f├╝r Login */
#body.login-background {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Overlay f├╝r Login-Hintergrund */
#body.login-background::before {
	display: none; /* Deaktiviert - wird über linear-gradient gelöst */
}
#box{
	border: 2px solid #34495e;
	border-radius: 12px;
	width: 280px;  
	margin: 0px auto;
	box-shadow: 0 8px 32px rgba(52, 73, 94, 0.15);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	}

input{ 
	border: 2px solid #34495e; 
	border-radius: 8px;
	background: linear-gradient(145deg, #ffffff, #f8f9fa); 
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	color:#2c3e50; 
	font-size: 0.95em;
	padding: 8px 12px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
input:focus {
	outline: none;
	border-color: #2c3e50;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.2);
	transform: translateY(-1px);
}
select{ 
	border: 2px solid #34495e; 
	border-radius: 8px;
	background: linear-gradient(145deg, #ffffff, #f8f9fa); 
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	color:#2c3e50; 
	font-size: 0.95em;
	padding: 8px 12px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
select:focus {
	outline: none;
	border-color: #2c3e50;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.2);
}

#ueberschrift{
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white;
	font-size: 11px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 600;
	font-style: normal;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 12px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	}
#inhalt{
	padding: 20px; 
	font-size: 0.95em; 
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-image:url('lo.png');
	background-repeat:no-repeat;
	background-position:bottom right;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	}
#copyright{
	font-size: 9px;
	}
#login{
	display:inline;
	}
#copyright a:link {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
#copyright a:visited {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
#copyright a:active {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#34495e; text-decoration:none; transition: all 0.3s ease;}
#copyright a:hover {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#34495e; text-decoration:none; transform: translateY(-1px);}

/* for chat.php*/
table{
font-size: 13px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#body_id{
	height: 100vh;
	margin: 0px;
	padding: 0px;
	color:#2c3e50;
	background: linear-gradient(135deg, #ecf0f1 0%, #f8f9fa 50%, #ecf0f1 100%);
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

/* Dynamischer Hintergrund f├╝r Chat */
#body_id.custom-background {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Neues Overlay-System nur für Hintergrundbild - nicht als separates Element */
.background-overlay {
	display: none; /* Deaktiviert - verwenden stattdessen background-blend */
}

/* Overlay-Varianten */
.overlay-light { background: rgba(236, 240, 241, 0.2) !important; }
.overlay-light-30 { background: rgba(236, 240, 241, 0.3) !important; }
.overlay-light-50 { background: rgba(236, 240, 241, 0.5) !important; }

.overlay-dark { background: rgba(44, 62, 80, 0.2) !important; }
.overlay-dark-30 { background: rgba(44, 62, 80, 0.3) !important; }
.overlay-dark-50 { background: rgba(44, 62, 80, 0.5) !important; }

.overlay-blue { background: rgba(52, 152, 219, 0.2) !important; }
.overlay-blue-30 { background: rgba(52, 152, 219, 0.3) !important; }
.overlay-blue-50 { background: rgba(52, 152, 219, 0.5) !important; }

.overlay-black { background: rgba(0, 0, 0, 0.2) !important; }
.overlay-black-30 { background: rgba(0, 0, 0, 0.3) !important; }
.overlay-black-50 { background: rgba(0, 0, 0, 0.5) !important; }

/* Chat-Elemente über das Overlay legen */
#kopf, #chatinhalt, #onlinelist, #form, #rahmen_um_alles {
	position: relative;
	z-index: 10;
}
#kopf{
	font-size: 13px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: normal;
	font-weight: 600;
	padding: 8px 12px;
	background: linear-gradient(145deg, rgba(52, 73, 94, 0.9), rgba(44, 62, 80, 0.9));
	color: white;
	border-radius: 8px;
	margin-bottom: 5px;
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.2);
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#rahmen_um_alles{
	margin: 5px;
	padding: 0px;
}
/* Chat-Container entfernt - zur├╝ck zum originalen Float-Layout */

#onlinelist{
	/*
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	*/

	padding: 15px;
	background: transparent;
	font-size: 0.85em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: normal;
	color: #2c3e50;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8);
	float: right;
	width: 230px;
	border: 2px solid rgba(52, 73, 94, 0.8);
	border-radius: 12px;
	height: calc(100vh - 150px);
	max-height: calc(100vh - 150px);
	flex-shrink: 0;
	padding-bottom: 16px;
	overflow: auto;
	box-shadow: 0 8px 32px rgba(52, 73, 94, 0.15);
	transition: all 0.3s ease;
}

* html #splitpane {
	margin-left: -2px;
}
#splitpane{
	background-image:url('../../img/splitpane.png');
	background-repeat:no-repeat;
 	background-position:center;
	font-size: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: normal;
	float: right;
	color:white;
	width: 8px;
	margin: 1px;
	height: calc(100vh - 150px);
	max-height: calc(100vh - 150px);
	overflow: auto;
	cursor:e-resize;
	border-radius: 4px;
	transition: all 0.3s ease;
	flex-shrink: 0;
}
#splitpane:hover {
	background-color: rgba(52, 73, 94, 0.2);
}

#chatinhalt{
	padding: 15px;
	background: transparent;
	font-size: 0.95em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: normal;
	border: 2px solid rgba(52, 73, 94, 0.8);
	border-radius: 12px;
	color: #2c3e50;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8);
	margin-right: 250px;
	position:relative;
	height: calc(100vh - 150px);
	max-height: calc(100vh - 150px);
	overflow: auto;
	padding: 15px;
	padding-bottom: 16px;
	box-shadow: 0 8px 32px rgba(52, 73, 94, 0.15);
	transition: all 0.3s ease;
}
#form{
	background: transparent;
	border: 2px solid rgba(52, 73, 94, 0.8);
	border-radius: 12px;
	font-style: normal;
	clear: both;
	margin-top: 5px;
	padding: 10px 15px;
	height: 40px;
	box-shadow: 0 8px 32px rgba(52, 73, 94, 0.15);
	transition: all 0.3s ease;
}
#form_left{
	position:relative;
    float: left;
    font-size: 0.95em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#form_right{
	padding: 8px;
	font-size: 0.85em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	position:relative;
	float: left;
}

#privat_messages{
 position: absolute;
 top: 100px;
 left: 100px;
 background: linear-gradient(145deg, #ffffff, #f8f9fa);
 backdrop-filter: blur(10px);
 border: 2px solid #34495e;
 border-radius: 12px;
 padding: 15px;
 box-shadow: 0 8px 32px rgba(52, 73, 94, 0.2);
}

.rooms{
 background: linear-gradient(145deg, #bdc3c7, #ecf0f1);
 border: 2px solid #34495e;
 border-radius: 8px;
 padding: 8px;
 margin-bottom: 6px;
 cursor:pointer;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
.rooms:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 16px rgba(52, 73, 94, 0.2);
 background: linear-gradient(145deg, #95a5a6, #bdc3c7);
}
.rooms_not_allowed{
 background: linear-gradient(145deg, #f5f5f5, #ecf0f1);
 border: 2px solid #95a5a6;
 border-radius: 8px;
 color: #7f8c8d;
 padding: 8px;
 margin-bottom: 6px;
 cursor:pointer;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(149, 165, 166, 0.1);
}

.privat_ausg_an{
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
 background: linear-gradient(145deg, #ffe8e8, #ffeeee);
 border: 2px solid #e74c3c;
 border-radius: 8px;
 padding: 8px;
 margin: 4px 0;
 box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15);
}
.privat_ausg_von{
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
 background: linear-gradient(145deg, #ecf0f1, #f8f9fa);
 border: 2px solid #34495e;
 border-radius: 8px;
 padding: 8px;
 margin: 4px 0;
 box-shadow: 0 2px 8px rgba(52, 73, 94, 0.15);
}

#close_privat{
	cursor:pointer;
	background: linear-gradient(145deg, #ffffff, #f0f0f0);
	font-size: 0.95em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 600;
	font-style: normal;
	border: 2px solid #34495e;
	border-radius: 6px;
	padding: 6px 12px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
#close_privat:hover {
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.2);
}
#privat_anzeige{
	padding-bottom: 3px;
	height: 20px;
}
#privat_modus{
	font-size: 12px;
}

.privat_mesages_window{
	height: 165px; 
	padding:12px; 
	border: 2px solid #34495e; 
	border-radius: 8px;
	overflow: auto;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	background-image:url('lo.png');
	background-repeat:no-repeat;
	background-position:bottom right;
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.1);
}
.privat_win_button{
	cursor:pointer; 
	font-weight:600;
	border: 2px solid #34495e;
	border-radius: 8px;
	width: 190px;
	margin-top: 6px;
	background: linear-gradient(145deg, #bdc3c7, #ecf0f1);
	text-align: center;
	padding: 8px;
	transition: all 0.3s ease;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
.privat_win_button:hover {
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.2);
}

.colorpick{
     font-size: 11px;
     cursor:pointer;
     border: 2px solid #34495e;
     border-radius: 6px;
     width: 100%;
     padding: 4px;
     transition: all 0.3s ease;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.colorpick:hover {
     transform: scale(1.05);
     box-shadow: 0 2px 8px rgba(52, 73, 94, 0.2);
}
.dialog{
	font-size: 9px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: normal;
}

.img_button{
	cursor:pointer;
	transition: all 0.3s ease;
	border-radius: 4px;
}
.img_button:hover {
	transform: scale(1.1);
}

.private_message_field{
	width:300px;
	margin-top: 4px;
	border: 2px solid #34495e;
	border-radius: 8px;
	padding: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}
.private_message_field:focus {
	outline: none;
	border-color: #2c3e50;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.2);
}

a:link {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
a:visited {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
a:active {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#34495e; text-decoration:none; transition: all 0.3s ease;}
a:hover {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:10pt; color:#34495e; text-decoration:none; transform: translateY(-1px);}

/*------------ for history -----------------------*/
.kopf{ 
	background: linear-gradient(145deg, #34495e, #2c3e50); 
	color: white;
	border-radius: 8px 8px 0 0;
	padding: 8px;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.gerade{ 
	background: linear-gradient(145deg, #ffffff, #f8f9fa); 
	border-radius: 4px;
	margin: 2px 0;
	padding: 4px;
}
.ungerade{ 
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	border-radius: 4px;
	margin: 2px 0;
	padding: 4px;
}
.privat_von{ 
	background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
	border: 1px solid #34495e;
	border-radius: 6px;
	margin: 2px 0;
	padding: 6px;
}
.privat_nach{ 
	background: linear-gradient(145deg, #ffe8e8, #ffdddd);
	border: 1px solid #e74c3c;
	border-radius: 6px;
	margin: 2px 0;
	padding: 6px;
}

/*------------ for adminbereich -----------------------*/
#adminbereich_body{
background: linear-gradient(135deg, #ecf0f1 0%, #f8f9fa 50%, #ecf0f1 100%);
color:#2c3e50;
font-size: 0.95em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
padding: 20px;
}

/* Admin Panel Container */
.admin_container {
	max-width: 1200px;
	margin: 0 auto;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(52, 73, 94, 0.1);
	overflow: hidden;
}

/* Admin Header */
.admin_header {
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white;
	padding: 20px 30px;
	text-align: center;
}

.admin_header h1 {
	margin: 0;
	font-size: 1.8em;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Admin Navigation Grid */
.admin_nav_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	padding: 30px;
}

/* Admin Navigation Items */
.admin_nav_item {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border: 2px solid #bdc3c7;
	border-radius: 12px;
	padding: 20px;
	text-decoration: none;
	color: #2c3e50;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 15px;
	box-shadow: 0 4px 15px rgba(52, 73, 94, 0.08);
}

.admin_nav_item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(52, 73, 94, 0.15);
	border-color: #34495e;
	text-decoration: none;
	color: #2c3e50;
}

/* Admin Icons */
.admin_icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(145deg, #34495e, #2c3e50);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: white;
	flex-shrink: 0;
}

.admin_nav_item:hover .admin_icon {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	transform: scale(1.1);
}

/* Admin Text */
.admin_text {
	flex: 1;
}

.admin_text h3 {
	margin: 0 0 5px 0;
	font-size: 1.1em;
	font-weight: 600;
}

.admin_text p {
	margin: 0;
	font-size: 0.9em;
	color: #7f8c8d;
	line-height: 1.4;
}

/* Modern CSS Icons using Unicode */
.icon-blacklist::before { content: "­ƒÜ½"; }
.icon-rooms::before { content: "­ƒÅá"; }
.icon-admin::before { content: "­ƒæÑ"; }
.icon-users::before { content: "­ƒæñ"; }
.icon-smilies::before { content: "­ƒÿÇ"; }
.icon-settings::before { content: "ÔÜÖ´©Å"; }

/* Admin Content Area */
.admin_content {
	padding: 30px;
}

/* Admin Back Button */
.admin_back_btn {
	position: absolute;
	top: 20px;
	left: 30px;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	color: #2c3e50 !important;
	padding: 8px 15px;
	border-radius: 8px;
	text-decoration: none !important;
	font-size: 0.9em;
	font-weight: 500;
	border: 2px solid #bdc3c7;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
}

.admin_back_btn:hover {
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white !important;
	border-color: #34495e;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.2);
}

/* Admin Table Container */
.admin_table_container {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.1);
	border: 2px solid #ecf0f1;
}

.admin_table_header {
	display: grid;
	grid-template-columns: 200px 1fr 250px 150px;
	background: linear-gradient(145deg, #34495e, #2c3e50);
	color: white;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.admin_table_row {
	display: grid;
	grid-template-columns: 200px 1fr 250px 150px;
	border-bottom: 1px solid #ecf0f1;
	transition: all 0.3s ease;
}

.admin_table_row:hover {
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
}

.admin_table_row:last-child {
	border-bottom: none;
}

.admin_table_cell {
	padding: 15px;
	display: flex;
	align-items: center;
	font-size: 0.9em;
	border-right: 1px solid #ecf0f1;
}

.admin_table_cell:last-child {
	border-right: none;
}

/* Admin Delete Button */
.admin_delete_btn {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	color: white !important;
	padding: 6px 12px;
	border-radius: 6px;
	text-decoration: none !important;
	font-size: 0.8em;
	font-weight: 500;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
}

.admin_delete_btn:hover {
	background: linear-gradient(145deg, #c0392b, #a93226);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* Admin Note */
.admin_note {
	margin-top: 20px;
	padding: 15px;
	background: linear-gradient(145deg, #d5dbdb, #ecf0f1);
	border-radius: 8px;
	border-left: 4px solid #3498db;
	font-size: 0.9em;
	color: #2c3e50;
}

/* Empty State */
.admin_empty_state {
	text-align: center;
	padding: 60px 20px;
	color: #7f8c8d;
}

.admin_empty_icon {
	font-size: 4em;
	margin-bottom: 20px;
}

.admin_empty_state h3 {
	margin: 0 0 10px 0;
	color: #2c3e50;
	font-size: 1.3em;
}

.admin_empty_state p {
	margin: 0;
	font-size: 1em;
}

/* Admin Form Sections */
.admin_form_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
}

.admin_form_section h2 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 1.3em;
	font-weight: 600;
	border-bottom: 2px solid #ecf0f1;
	padding-bottom: 10px;
}

.admin_form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.admin_form_row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.admin_form_row label {
	font-weight: 600;
	color: #2c3e50;
	font-size: 0.95em;
}

.admin_input, .admin_select {
	padding: 12px 15px;
	border: 2px solid #bdc3c7;
	border-radius: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.95em;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.08);
}

.admin_input:focus, .admin_select:focus {
	outline: none;
	border-color: #34495e;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.1);
	background: #ffffff;
}

.admin_submit_btn {
	background: linear-gradient(145deg, #27ae60, #2ecc71);
	color: white;
	border: none;
	padding: 12px 25px;
	border-radius: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2);
	align-self: flex-start;
}

.admin_submit_btn:hover {
	background: linear-gradient(145deg, #229954, #27ae60);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
}

/* Admin List Section */
.admin_list_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
}

.admin_list_section h2 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 1.3em;
	font-weight: 600;
	border-bottom: 2px solid #ecf0f1;
	padding-bottom: 10px;
}

.admin_rooms_list {
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	border-radius: 8px;
	padding: 20px;
	border: 1px solid #bdc3c7;
}

#adminbereich_body a:link {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:0.95em; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
#adminbereich_body a:visited {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:0.95em; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
#adminbereich_body a:active {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:0.95em; color:#34495e; text-decoration:none; transition: all 0.3s ease;}
#adminbereich_body a:hover {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:0.95em; color:#34495e; text-decoration:none; transform: translateY(-1px);}

/* ================= ADMIN BREADCRUMB NAVIGATION ================= */
.admin_breadcrumb {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.breadcrumb_separator {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.2em;
	font-weight: 300;
}

.breadcrumb_current {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	font-size: 0.9em;
}

/* ================= ADMIN BUTTONS ================= */
.admin_btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.9em;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admin_btn_primary {
	background: linear-gradient(145deg, #27ae60, #2ecc71);
	color: white !important;
	border-color: #27ae60;
}

.admin_btn_primary:hover {
	background: linear-gradient(145deg, #229954, #27ae60);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.admin_btn_secondary {
	background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
	color: #2c3e50 !important;
	border-color: #bdc3c7;
}

.admin_btn_secondary:hover {
	background: linear-gradient(145deg, #bdc3c7, #95a5a6);
	color: #2c3e50 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(189, 195, 199, 0.3);
}

.admin_btn_danger {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	color: white !important;
	border-color: #e74c3c;
}

.admin_btn_danger:hover {
	background: linear-gradient(145deg, #c0392b, #a93226);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* ================= ADMIN INFO SECTIONS ================= */
.admin_info_section {
	margin-bottom: 25px;
}

.admin_info_card {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 20px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
}

.admin_info_card h3 {
	margin: 0 0 15px 0;
	color: #2c3e50;
	font-size: 1.2em;
	font-weight: 600;
}

.admin_info_card ul {
	margin: 0;
	padding-left: 20px;
	color: #34495e;
}

.admin_info_card li {
	margin-bottom: 8px;
	line-height: 1.5;
}

.admin_info_warning {
	border-left: 4px solid #f39c12;
	background: linear-gradient(145deg, #fdf2e9, #fcf3cf);
}

.admin_info_error {
	border-left: 4px solid #e74c3c;
	background: linear-gradient(145deg, #fdedec, #fadbd8);
}

/* ================= ADMIN FORM COMPONENTS ================= */
.admin_form_container {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	margin-bottom: 25px;
}

.admin_form_group {
	margin-bottom: 20px;
}

.admin_label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #2c3e50;
	font-size: 0.95em;
}

.admin_input {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #bdc3c7;
	border-radius: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.95em;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.08);
	box-sizing: border-box;
}

.admin_input:focus {
	outline: none;
	border-color: #34495e;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.1);
	background: #ffffff;
}

.admin_help_text {
	display: block;
	margin-top: 5px;
	font-size: 0.85em;
	color: #7f8c8d;
	font-style: italic;
}

.admin_form_actions {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 2px solid #ecf0f1;
}

/* ================= ADMIN FILE UPLOAD ================= */
.admin_file_input_wrapper {
	position: relative;
}

.admin_file_input {
	width: 100%;
	padding: 12px 15px;
	border: 2px dashed #bdc3c7;
	border-radius: 8px;
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	transition: all 0.3s ease;
	cursor: pointer;
}

.admin_file_input:hover {
	border-color: #34495e;
	background: linear-gradient(145deg, #ecf0f1, #d5dbdb);
}

.admin_file_preview {
	margin-top: 15px;
	padding: 15px;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border: 2px solid #ecf0f1;
	border-radius: 8px;
	text-align: center;
}

/* ================= ADMIN ORIGINAL CONTENT WRAPPER ================= */
.admin_actions_bar {
	margin-bottom: 25px;
	display: flex;
	gap: 15px;
	align-items: center;
}

.admin_list_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	margin-bottom: 25px;
}

.admin_original_content {
	background: white;
	border-radius: 8px;
	padding: 15px;
	border: 1px solid #bdc3c7;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.1);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
}

/* Allgemeine Smilie-Elemente styling */
.admin_original_content > * {
	display: block;
	background: white;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 6px;
	border: 1px solid #ecf0f1;
	box-shadow: 0 2px 6px rgba(52, 73, 94, 0.08);
	transition: all 0.3s ease;
}

.admin_original_content > *:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(52, 73, 94, 0.15);
	border-color: #bdc3c7;
}

/* Für Links innerhalb der Smilie-Einträge */
.admin_original_content a {
	color: #2c3e50 !important;
	text-decoration: none !important;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 500;
	margin: 0 3px;
	display: inline-block;
	transition: all 0.3s ease;
}

.admin_original_content a:hover {
	color: white !important;
	background: linear-gradient(145deg, #34495e, #2c3e50);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.2);
}

/* Bilder in den Smilie-Einträgen */
.admin_original_content img {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid #bdc3c7;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 10px;
}

/* Spezielle Button-Styles */
.admin_original_content a[href*="editieren"] {
	background: linear-gradient(145deg, #3498db, #2980b9);
	color: white !important;
	border: 1px solid #2980b9;
}

.admin_original_content a[href*="editieren"]:hover {
	background: linear-gradient(145deg, #2980b9, #21618c);
}

.admin_original_content a[href*="l├Âschen"], 
.admin_original_content a[href*="loeschen"] {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	color: white !important;
	border: 1px solid #c0392b;
}

.admin_original_content a[href*="l├Âschen"]:hover,
.admin_original_content a[href*="loeschen"]:hover {
	background: linear-gradient(145deg, #c0392b, #a93226);
}

/* Style original PHP output - flexible f├╝r verschiedene HTML-Strukturen */

.admin_original_content a {
	color: #2c3e50 !important;
	text-decoration: none !important;
	transition: all 0.3s ease;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 500;
	margin-right: 5px;
	display: inline-block;
}

.admin_original_content a:hover {
	color: white !important;
	background: linear-gradient(145deg, #34495e, #2c3e50);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.2);
}

/* Spezielle Buttons f├╝r Smilie-Aktionen */
.admin_original_content a[href*="editieren"] {
	background: linear-gradient(145deg, #3498db, #2980b9);
	color: white !important;
	border: 1px solid #2980b9;
}

.admin_original_content a[href*="editieren"]:hover {
	background: linear-gradient(145deg, #2980b9, #21618c);
}

.admin_original_content a[href*="l├Âschen"], 
.admin_original_content a[href*="loeschen"] {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	color: white !important;
	border: 1px solid #c0392b;
}

.admin_original_content a[href*="l├Âschen"]:hover,
.admin_original_content a[href*="loeschen"]:hover {
	background: linear-gradient(145deg, #c0392b, #a93226);
}

/* Smilie-spezifische Spalten-Anordnung */
.admin_original_content td:first-child {
	width: 50px;
	text-align: center;
}

.admin_original_content td:nth-child(2) {
	width: 120px;
	font-weight: 600;
	color: #2c3e50;
}

.admin_original_content td:nth-child(3) {
	width: 150px;
	color: #7f8c8d;
	font-style: italic;
}

.admin_original_content td:last-child {
	width: 200px;
	text-align: center;
}

/* ================= ADMIN BACKGROUND MANAGEMENT ================= */
.upload_zone {
	border: 3px dashed #34495e !important;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	background: linear-gradient(145deg, #ecf0f1, #d5dbdb) !important;
	transition: all 0.3s ease;
	cursor: pointer;
	margin-bottom: 25px;
	color: #2c3e50;
}

.upload_zone:hover {
	border-color: #2c3e50 !important;
	background: linear-gradient(145deg, #d5dbdb, #bdc3c7) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(52, 73, 94, 0.2);
}

.upload_zone.dragover {
	border-color: #27ae60 !important;
	background: linear-gradient(145deg, #e8f8f5, #d5f4e6) !important;
	color: #27ae60;
}

.upload_icon {
	font-size: 3em !important;
	margin-bottom: 15px !important;
	opacity: 0.8;
}

.background_preview {
	width: 100%;
	height: 200px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 2px solid #bdc3c7;
	position: relative;
	overflow: hidden;
	margin: 15px 0;
	box-shadow: 0 4px 15px rgba(52, 73, 94, 0.1);
}

.preview_overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 15px;
	color: white;
	font-weight: 600;
	font-size: 0.9em;
}

.background_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.background_item {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 20px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	transition: all 0.3s ease;
}

.background_item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(52, 73, 94, 0.15);
	border-color: #34495e;
}

.background_item.active {
	border-color: #27ae60;
	background: linear-gradient(145deg, #f0fff4, #e8f8f5);
}

.background_actions {
	display: flex;
	gap: 10px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.admin_btn_small {
	padding: 4px 8px;
	font-size: 0.8em;
	border-radius: 6px;
}

.admin_background_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	margin-bottom: 25px;
}

.admin_background_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.admin_background_item {
	background: white;
	border-radius: 12px;
	padding: 20px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	transition: all 0.3s ease;
}

.admin_background_item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(52, 73, 94, 0.15);
	border-color: #34495e;
}

.admin_background_item.active {
	border-color: #27ae60;
	background: linear-gradient(145deg, #ffffff, #f0fff4);
}

.admin_background_preview {
	width: 100%;
	height: 150px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #bdc3c7;
	position: relative;
	overflow: hidden;
	margin: 10px 0;
}

.admin_background_overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	padding: 10px;
	color: white;
	font-weight: 500;
	font-size: 0.9em;
}

/* ================= ADMIN USER CONTROLS ================= */
.admin_user_controls {
	margin-bottom: 25px;
	padding: 20px;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
}

.admin_bulk_actions {
	display: flex;
	gap: 15px;
	align-items: center;
	flex-wrap: wrap;
}

.admin_user_list_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #ecf0f1;
}

.admin_user_list_header h2 {
	margin: 0;
	color: #2c3e50;
	font-size: 1.3em;
	font-weight: 600;
}

.admin_list_controls {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Checkbox-Styling f├╝r Benutzer-Listen */
.admin_original_content input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	accent-color: #2c3e50;
	cursor: pointer;
}

.admin_original_content form {
	margin: 0;
	padding: 0;
}

/* ================= ADMIN INPUT GROUPS ================= */
.admin_input_group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.admin_input_short {
	width: 80px !important;
	flex-shrink: 0;
}

.admin_input_suffix {
	color: #7f8c8d;
	font-size: 0.9em;
	font-weight: 500;
	white-space: nowrap;
}

.admin_select {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #bdc3c7;
	border-radius: 8px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 0.95em;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(52, 73, 94, 0.08);
	box-sizing: border-box;
	cursor: pointer;
}

.admin_select:focus {
	outline: none;
	border-color: #34495e;
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.1);
	background: #ffffff;
}

/* ================= ADMIN USER MANAGEMENT ================= */
.admin_user_actions {
	margin-bottom: 25px;
	display: flex;
	gap: 15px;
	align-items: center;
}

.admin_user_list_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	margin-bottom: 25px;
}

.admin_user_list_section h2 {
	margin: 0 0 20px 0;
	color: #2c3e50;
	font-size: 1.3em;
	font-weight: 600;
	border-bottom: 2px solid #ecf0f1;
	padding-bottom: 10px;
}

.admin_user_list_container {
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	border-radius: 8px;
	padding: 20px;
	border: 1px solid #bdc3c7;
	min-height: 100px;
}

/* ================= ADMIN SMILIE SPECIFIC ================= */
.admin_smilies_section {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 25px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
}

.admin_smilies_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #ecf0f1;
}

.admin_smilies_header h2 {
	margin: 0;
	color: #2c3e50;
	font-size: 1.3em;
	font-weight: 600;
}

.admin_smilies_grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	border-radius: 12px;
	border: 2px solid #ecf0f1;
}

.admin_smilie_item {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border: 2px solid #bdc3c7;
	border-radius: 10px;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(52, 73, 94, 0.08);
}

.admin_smilie_item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(52, 73, 94, 0.15);
	border-color: #34495e;
}

.admin_smilie_image {
	max-width: none;
	max-height: none;
	width: auto;
	height: auto;
	border-radius: 4px;
	flex-shrink: 0;
}

.admin_smilie_sign {
	font-weight: 600;
	color: #2c3e50;
	font-size: 1em;
	flex: 1;
	text-align: left;
	padding: 0 15px;
	word-break: break-all;
}

.admin_smilie_actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.admin_smilie_btn {
	padding: 6px 12px;
	font-size: 0.8em;
	border-radius: 6px;
	text-decoration: none !important;
	transition: all 0.3s ease;
	min-width: 60px;
	text-align: center;
}

.admin_smilie_preview {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: linear-gradient(145deg, #f8f9fa, #ecf0f1);
	border-radius: 10px;
	border: 2px solid #ecf0f1;
	margin-bottom: 20px;
}

.smilie_preview_image {
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(52, 73, 94, 0.1);
	border: 2px solid #bdc3c7;
	padding: 10px;
	background: white;
}

.smilie_info {
	flex: 1;
}

.smilie_info p {
	margin: 5px 0;
	color: #34495e;
	font-size: 0.9em;
}

.smilie_info strong {
	color: #2c3e50;
}

/* ================= ADMIN MESSAGE PAGES ================= */
.admin_message_container {
	max-width: 600px;
	margin: 50px auto;
	text-align: center;
}

.admin_message_content {
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
	border-radius: 12px;
	padding: 30px;
	border: 2px solid #ecf0f1;
	box-shadow: 0 4px 20px rgba(52, 73, 94, 0.08);
	margin-bottom: 20px;
	font-size: 1.1em;
	color: #2c3e50;
}

.admin_message_actions {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.admin_auto_redirect {
	font-size: 0.9em;
	color: #7f8c8d;
	margin: 0;
	font-style: italic;
}

/* ================= ADMIN TITLE ================= */
.admin_title {
	margin: 0;
	font-size: 1.8em;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	color: white;
}



/*---------------------------- for Window -------------------------*/
.overlay_etchat_green {
	background-color: #ffffff;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	backdrop-filter: blur(5px);
}

.etchat_green_nw {
 border-left: 2px solid #34495e;
 border-top: 2px solid #34495e;
 border-bottom: 1px solid #34495e;
  width:10px;
  height:18px;
  background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
  border-top-left-radius: 8px;
}

.etchat_green_n {
  border-top: 2px solid #34495e;
  border-bottom: 1px solid #34495e;
  background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
}

.etchat_green_ne {
 border-right: 2px solid #34495e;
 border-top: 2px solid #34495e;
 border-bottom: 1px solid #34495e;
  width:10px;
  height:18px;
  background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
  border-top-right-radius: 8px;
}

.etchat_green_w {
 border-left: 2px solid #34495e;
 width:10px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

.etchat_green_e {
  border-right: 2px solid #34495e;
  width:10px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

.etchat_green_sw {
 border-left: 2px solid #34495e;
 border-bottom: 2px solid #34495e;
  width:10px;
  height:3px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-bottom-left-radius: 8px;
}

.etchat_green_s  {
border-bottom: 2px solid #34495e;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

.etchat_green_se, .etchat_green_sizer {
 border-right: 2px solid #34495e;
 border-bottom: 2px solid #34495e;
  width:10px;
  height:3px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-bottom-right-radius: 8px;
}

.etchat_green_sizer {
	cursor:se-resize;
}

.etchat_green_close {
	width: 23px;
	height: 23px;
	background: transparent url(button-close-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:12px;
	cursor:pointer;
	z-index:1000;
	border-radius: 50%;
	transition: all 0.3s ease;
}
.etchat_green_close:hover {
	transform: scale(1.1);
	background-color: rgba(255, 107, 107, 0.2);
}

.etchat_green_minimize {
	width: 23px;
	height: 23px;
	background: transparent url(button-min-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:55px;
	cursor:pointer;
	z-index:1000;
	border-radius: 50%;
	transition: all 0.3s ease;
}
.etchat_green_minimize:hover {
	transform: scale(1.1);
	background-color: rgba(52, 73, 94, 0.2);
}

.etchat_green_maximize {
	width: 23px;
	height: 23px;
	background: transparent url(button-max-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:33px;
	cursor:pointer;
	z-index:1000;
	border-radius: 50%;
	transition: all 0.3s ease;
}
.etchat_green_maximize:hover {
	transform: scale(1.1);
	background-color: rgba(52, 73, 94, 0.2);
}

.etchat_green_title {
	float:left;
	height:14px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-align:left;
	margin-top:2px;
	width:100%;
	color:#2c3e50;
}

.etchat_green_content {
	padding-top:5px;
	overflow:auto;
	color: #2c3e50;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.0em;
	background: linear-gradient(145deg, #ffffff, #f8f9fa);
}

.etchat_green_content a:link {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:1.1em; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
.etchat_green_content a:visited {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:1.1em; color:#2c3e50; text-decoration:none; transition: all 0.3s ease;}
.etchat_green_content a:active {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:1.1em; color:#34495e; text-decoration:none; transition: all 0.3s ease;}
.etchat_green_content a:hover {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:1.1em; color:#34495e; text-decoration:none; transform: translateY(-1px);}

/* ================= RESPONSIVE DESIGN ================= */

/* Optimierung f├╝r 1920x1080 - Standard Full HD */
@media screen and (width: 1920px) and (height: 1080px) {
	#body_id {
		overflow: hidden;
	}
	
	#rahmen_um_alles {
		margin: 3px;
		height: calc(100vh - 6px);
	}
	
	#onlinelist, #splitpane, #chatinhalt {
		height: calc(100vh - 120px);
		max-height: calc(100vh - 120px);
	}
	
	#kopf {
		padding: 6px 12px;
		margin-bottom: 3px;
	}
	
	#form {
		margin-top: 3px;
		padding: 8px 15px;
		height: 36px;
	}
}

/* Allgemeine Full HD Optimierung (1920x1080 und ähnlich) */
@media screen and (min-width: 1900px) and (min-height: 1000px) {
	#body_id {
		overflow: hidden;
	}
	
	#rahmen_um_alles {
		margin: 3px;
	}
	
	#onlinelist, #splitpane, #chatinhalt {
		height: calc(100vh - 110px);
		max-height: calc(100vh - 110px);
	}
}

/* Tablet Portrait und gr├Â├ƒere Smartphones */
@media screen and (max-width: 1024px) {
	#rahmen_um_alles {
		margin: 5px;
		height: calc(100vh - 10px);
	}
	
	#onlinelist {
		width: 180px;
		padding: 10px;
		font-size: 0.8em;
	}
	
	#chatinhalt {
		padding: 10px;
		font-size: 0.9em;
	}
	
	#form {
		padding: 10px;
	}
	
	#kopf {
		padding: 8px;
		font-size: 12px;
	}
}

/* Smartphone Landscape */
@media screen and (max-width: 768px) {
	#chat_container {
		flex-direction: column;
	}
	
	#onlinelist {
		width: 100%;
		height: 120px;
		order: 1;
	}
	
	#splitpane {
		display: none;
	}
	
	#chatinhalt {
		order: 2;
		height: auto;
		min-height: 200px;
	}
	
	#form {
		order: 3;
	}
	
	#rahmen_um_alles {
		margin: 2px;
		height: calc(100vh - 4px);
	}
}

/* Smartphone Portrait */
@media screen and (max-width: 480px) {
	#box {
		width: 90%;
		max-width: 320px;
	}
	
	#onlinelist {
		height: 100px;
		padding: 8px;
		font-size: 0.75em;
	}
	
	#chatinhalt {
		padding: 8px;
		font-size: 0.85em;
		min-height: 150px;
	}
	
	#form {
		padding: 8px;
		min-height: 40px;
	}
	
	#kopf {
		padding: 6px;
		font-size: 11px;
	}
	
	input, select {
		padding: 6px 8px;
		font-size: 0.9em;
	}
	
	.private_message_field {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Extra kleine Bildschirme */
@media screen and (max-width: 320px) {
	#onlinelist {
		height: 80px;
		padding: 5px;
		font-size: 0.7em;
	}
	
	#chatinhalt {
		padding: 5px;
		font-size: 0.8em;
		min-height: 120px;
	}
	
	#form {
		padding: 5px;
	}
	
	#kopf {
		padding: 5px;
		font-size: 10px;
	}
}

/* Große Bildschirme optimieren */
@media screen and (min-width: 1920px) {
	#rahmen_um_alles {
		max-width: 1800px;
		margin: 20px auto;
		height: calc(100vh - 40px);
	}
	
	#onlinelist {
		width: 280px;
		font-size: 0.9em;
	}
	
	#chatinhalt {
		font-size: 1em;
	}
}

/* H├Âhe-spezifische Anpassungen f├╝r kurze Bildschirme */
@media screen and (max-height: 600px) {
	#rahmen_um_alles {
		gap: 5px;
	}
	
	#kopf {
		padding: 6px;
		font-size: 11px;
	}
	
	#onlinelist, #chatinhalt {
		padding: 8px;
	}
	
	#form {
		padding: 8px;
		min-height: 35px;
	}
}

/* ================= ADMIN PANEL RESPONSIVE ================= */

/* Tablet Anpassungen f├╝r Admin Panel */
@media screen and (max-width: 1024px) {
	.admin_nav_grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 15px;
		padding: 20px;
	}
	
	.admin_nav_item {
		padding: 15px;
	}
	
	.admin_icon {
		width: 35px;
		height: 35px;
		font-size: 16px;
	}
	
	.admin_header h1 {
		font-size: 1.5em;
	}
}

/* Smartphone Anpassungen f├╝r Admin Panel */
@media screen and (max-width: 768px) {
	#adminbereich_body {
		padding: 10px;
	}
	
	.admin_nav_grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 15px;
	}
	
	.admin_nav_item {
		padding: 12px;
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}
	
	.admin_icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}
	
	.admin_header {
		padding: 15px 20px;
	}
	
	.admin_header h1 {
		font-size: 1.3em;
	}
}

/* Extra kleine Bildschirme f├╝r Admin Panel */
@media screen and (max-width: 480px) {
	.admin_container {
		border-radius: 8px;
		margin: 5px;
	}
	
	.admin_nav_grid {
		padding: 10px;
		gap: 8px;
	}
	
	.admin_nav_item {
		padding: 10px;
	}
	
	.admin_text h3 {
		font-size: 1em;
	}
	
	.admin_text p {

/* ============================================
   HINTERGRUNDBILD INTEGRATION
   ============================================ */

/* Chat Hintergrundbild */
.chat_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('../../img/backgrounds/chat_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Login Hintergrundbild */
.login_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('../../img/backgrounds/login_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Chat Container mit Hintergrundbild */
.chat_container_with_bg {
    position: relative;
    background: rgba(44, 62, 80, 0.85);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin: 10px;
    padding: 10px;
}

/* Login Container mit Hintergrundbild */
.login_container_with_bg {
    position: relative;
    background: rgba(44, 62, 80, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 30px;
    margin: 20px auto;
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Chat-Nachrichten mit Hintergrundbild */
.chat_messages_with_bg {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(3px);
    border-radius: 6px;
    margin: 5px 0;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 3px solid #3498db;
}

.chat_messages_with_bg:hover {
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* Input-Bereiche mit Hintergrundbild */
.input_with_bg {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(52, 73, 94, 0.3);
    border-radius: 4px;
    color: #2c3e50;
}

.input_with_bg:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Button-Styles für Hintergrundbild-Seiten */
.btn_with_bg {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
}

.btn_with_bg:hover {
    background: linear-gradient(135deg, #2980b9, #21618c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Responsive Anpassungen für Hintergrundbilder */
@media screen and (max-width: 768px) {
    .chat_background,
    .login_background {
        background-attachment: scroll;
        background-size: cover;
    }
    
    .chat_container_with_bg,
    .login_container_with_bg {
        margin: 5px;
        border-radius: 6px;
    }
    
    .login_container_with_bg {
        padding: 20px;
        max-width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .chat_container_with_bg {
        background: rgba(44, 62, 80, 0.92);
        backdrop-filter: blur(3px);
    }
    
    .login_container_with_bg {
        background: rgba(44, 62, 80, 0.95);
        padding: 15px;
    }
    
    .chat_messages_with_bg {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: none;
    }
}

/* Dark Mode für Hintergrundbilder */
@media (prefers-color-scheme: dark) {
    .chat_container_with_bg {
        background: rgba(33, 47, 61, 0.9);
        color: #ecf0f1;
    }
    
    .login_container_with_bg {
        background: rgba(33, 47, 61, 0.95);
        color: #ecf0f1;
        border-color: rgba(255, 255, 255, 0.05);
    }
    
    .chat_messages_with_bg {
        background: rgba(44, 62, 80, 0.95);
        color: #ecf0f1;
        border-left-color: #3498db;
    }
    
    .input_with_bg {
        background: rgba(44, 62, 80, 0.9) !important;
        color: #ecf0f1;
        border-color: rgba(127, 140, 141, 0.3);
    }
    
    .input_with_bg:focus {
        background: rgba(52, 73, 94, 0.9) !important;
        border-color: #3498db;
    }
}