/*
Hier werden Textfarbe am Chatstart und Systemtextfarbe angegeben.
Die Parameter werden mit PHO ausgelesen, deshalb bitte die Syntaxis beachten!
---------------------
Textfarbe:F50E0E
Systemfarbe:00FF00
---------------------
*/

/* Haupt-CSS-Datei - Importiert alle anderen CSS-Dateien */

@import url('variables.css');
@import url('on-off.css');

/* Zusätzliche globale Styles können hier hinzugefügt werden */


/*

ET-Chat Copyright by SEDesign | ET-Chat v3.x.x Lizenz: CCPL | Autor: Evgeni Tcherkasski (info@s-e-d.de)

ET-Chat_T-FISH-MOD Weiterentwicklung des ET-Chats durch Tommy (Thomas Kuhn) und Harlekin (Bernd Witte)

Die Weiterentwicklungen, Optimierungen und Ergänzungen am Code sind das geistige Eigentum von Tommy (Thomas Kuhn), Harlekin (Bernd Witte) und Powermen (Ch. Kersten).

*/

/* for index.php - Login */

.mySlides {
	border-radius: 10px;
	overflow: hidden;
	display: none;
	max-width: 100%;
	}

.img_banner img {
	border-radius: 10px;
	}

footer {position: fixed;  z-index: 1; left: 0px; bottom: 0px; width: 100%; background: rgba(0, 0, 0, 1);
text-align: center; color: #666666; font-size: var(--font-size-large); font-family: var(--font-family);}

#cookie-notice {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 1000;
}

#cookie-notice button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

#cookie-notice button:hover {
  background-color: #3e8e41;
}

.w3-content.w3-display-container {
	border-radius: 25px;
	width: 95%;
}

.layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  max-width: 100%;
  flex-wrap: nowrap;
}

.side {
  flex: 1; /* nimmt gleichen Anteil von freiem Platz */
  display: flex;
  justify-content: center; /* ? ZENTRIERT die Box in diesem Bereich */
  min-width: 0; /* verhindert Layoutprobleme */
  margin-top: 50px;
}

#links, #rechts {
  width: 375px;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px #333;
  padding: 10px;
  box-sizing: border-box;
}

#body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    color: var(--color-text-webfarbe);
    overflow-x: hidden;

    background:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* Abdunkeln */
      var(--color-backround) var(--img, none) no-repeat center center fixed;
    background-size: cover;
}

.ankuendigung {
	font-size: large;
}

#box {
  flex: 0 0 800px; /* ? exakt 800px, nicht kleiner */
  max-width: 800px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 50px #333;
  padding: 20px;
  box-sizing: border-box;
}

.start_text {
	display: -webkit-inline-box;
}

#inhalt {
border: 1px solid var(--color-border);
border-radius: 25px;
width: 95%;
padding: 0px;
font-size: var(--font-size-large);
margin: 0px auto;
background-color: transparent;
text-align: center;
}

#username, #email {
display: inline;
font-size: var(--font-size-xlarge); color: #FFFFFF; font-family: var(--font-family);
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid #333333;
outline: none;
padding: 5px 10px;
box-shadow: 0px 0px 50px #333333;
width: 70%;
text-align: center;
margin: 3px auto;
}

#gender {
font-size: var(--font-size-xlarge); color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid #333333;
padding: 5px 10px;
box-shadow: 0px 0px 50px #333333;
}

.gender-input {
display: none;
}

.gender-label {
text-align: center;
background-color: var(--color-button-zeilen);
border: 1px solid #333333;
padding: 5px 10px;
box-shadow: 0px 0px 50px #333333;
cursor: pointer;
}

.gender-input:checked + .gender-label {
background-image: linear-gradient(to bottom, #000000, var(--color-button-hover));
}

#pw, #password, #confirm_password  {
font-size: var(--font-size-xlarge);
color: #FFFFFF;
font-family: var(--font-family);
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid #333333;
outline: none;
padding: 5px 10px;
box-shadow: 0px 0px 50px #333333;
}

#submit_button {
font-size: var(--font-size-xlarge);
color: var(--color-text-webfarbe);
background-color: var(--color-button-zeilen);
border: 1px solid #333333;
outline: none;
padding: 5px 10px;
box-shadow: 0px 0px 50px #333333;
width: 50%;
text-align: center;
margin: 3px auto;
}

#submit_button:hover {
font-size: var(--font-size-xlarge);
color: var(--color-text-webfarbe);
background-color: var(--color-button-hover);
border: 1px solid #333333;
box-shadow: 0px 0px 50px #333333;
background-image: linear-gradient(to bottom, #000000,  var(--color-button-hover));
}

#submit_button:active {
position: relative;
transform: scale(1.11);
box-shadow: 0px 0px 50px #333333;
background-image: linear-gradient(to bottom, #000000, #333333);
}

#login {
display: inline;
}

.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.80);
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hidden;
transition-duration: 0.50s;
}

.chatregeln {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 75%;
	height: 90%;
	border: 1px solid #333333;
}

.datenschutzbestimmung {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 75%;
height: 90%;
border: 1px solid #333333;
}

.popup_text {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: 4rem;
}

.popup:target {
visibility: visible;
opacity: 1;
}

.popup:target {
bottom: 0;
right: 0;
transform: rotate(0);
}

.popup_close {
position: absolute;
right: 1.3rem;
top: 1.3rem;
width: 2rem;
height: 2rem;
font-size: var (--font-size-xlarge);
font-weight: 900;
border-radius: 100%;
background-color: #7A0000;
z-index: 4;
color: #FFFFFF;
line-height: 2rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.popup_close:hover { transform: scale(1.11); }
.popup_close:active { transform: scale(1.00); }

.compact-users-container {
	text-align: center;
	margin: 10px auto;
	padding: 5px;
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
	max-width: 90%;
}

.compact-user-row {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 5px;
}

.compact-user-card {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid;
	overflow: hidden;
	transition: transform 0.2s;
}
.compact-user-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.user-online-title {
  border: 1px solid var(--color-border);
  border-radius: 25px;
  width: 75%;
  font-size:  var(--font-size-large);
  margin: 0px auto;
  background-color: transparent;
  box-shadow: 0px 0px 50px #333333;
  text-align: center;
  }



/* for chat.php*/

table{
font-size: var(--font-size-large);
}

.player{
font-size: inherit;;
}

.tab_kopf {
	text-align: center;
	width: 100%;
}

/* Nur für den Tabellenkopf */
.tab_kopf td {
  padding: 0;
  vertical-align: middle;
}

/* Icons bleiben nebeneinander */
.tab_kopf .img_button {
  height: 40px;
  width: 40px;
  vertical-align: middle;
  display: inline-block;   /* Wichtig: block raus, inline-block rein */
  margin: 0 3px;           /* kleiner Abstand zwischen den Icons */
}

/* Optional: Zeilenhöhe etwas kompakter */
.tab_kopf tr:first-child {
  line-height: 1;
  height: 45px;            /* oder etwas nach Bedarf */
}



#rahmen_um_alles{
	margin: 3px;
}
#kopf{
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	font-style: normal;
    border: 2px solid var(--color-border);
	border-radius: 10px;
}

/* Player ansicht */
/* Wrapper sorgt dafür, dass wir Höhe animieren können */
.iframe-wrapper {
  overflow: hidden;
  max-height: 400px;  /* normale Höhe */
  transition: max-height 0.5s ease-in-out;
}

.iframe-wrapper iframe {
  width: 100%;
  height: <?php echo $_SESSION['etchat_'.$this->_prefix.'radio_box_hi']; ?>px;
  border: none;
}

/* Wenn ausgeblendet, wird Höhe auf 0 animiert */
.iframe-wrapper.collapsed {
  max-height: 0;
}
.header-toggle-bar {
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  background: var(--color-button-zeilen);
  text-align: center;
  border-radius: 5px;
  user-select: none;
}

.command-wrapper {
    position: relative;
    display: inline-block;
}

.command-button {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.command-menu {
    display: none;
    position: absolute;
    bottom: 35px;     /* statt top */
    left: 0;
    background: var(--color-button-hover);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #555;
    z-index: 9999;    /* wichtig falls etwas überlappt */
}


.command-menu div {
    padding: 5px 10px;
    cursor: pointer;
    color: var(--color-text-webfarbe);
}

.command-menu div:hover {
    background: var(--color-button-zeilen);
}

.command-wrapper:hover .command-menu {
    display: block;
}

/* Online List */
#onlinelist.collapsed {
	width: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

#onlinelist{
	padding: 5px;
	font-size: var(--font-size-large);
	font-family: var(--font-family);
	font-style: normal;
	float: right;

	border: 2px solid var(--color-border);
	height: 450px;
	padding-bottom: 15px;
	overflow: auto;
	border-radius: 10px;
}

* html #splitpane {
	margin-left: -2px;
}
#splitpane{
	background-image:url('../../img/splitpane.png');
	background-repeat:no-repeat;
 	background-position:center;
	font-size: var(--font-size-small);
	font-family: var(--font-family);
	font-style: normal;
	float: right;
	color:white;
	width: 8px;
	margin: 1px;
	height: 450px;
	overflow: auto;
	cursor:e-resize;
}

#chatinhalt{
	padding: 5px;
	font-size:  var(--font-size-xlarge);
	font-family: var(--font-family);
	font-style: normal;
	border: 2px solid var(--color-border);
	/*margin-right:200px;*/
	position:relative;
	height: 450px;
	overflow: auto;
	padding: 5px;
	padding-bottom: 15px;
	border-radius: 10px;
}

.avatar_u_list {
  border: 1px solid #333333;
  cursor: zoom-in;
  height: 15px;
  width: 15px;
  transition: transform 0.2s ease;
}

.avatar_u_list:active {
  border: 1px solid #333333;
  transform: scale(6.00) translate(35%, -35%);
  position: relative;
  z-index: 10;
}

.avatar {
	border: 2px solid var(--color-border);
	box-shadow: 0px 0px 10px #6b70c2;
	/* height: 70px; */
	/* width: 70px; */
	border-radius: 50px;
}

.avatar_w {
	border: 2px solid var(--color-border);
	box-shadow: 0px 0px 10px #6b70c2;
	height: 40px;
	width: 40px;
	border-radius: 50px;
}

#form {
font-size: var(--font-size-base);
font-family: var(--font-family);
font-style: normal;
clear: both;
border: 2px solid var(--color-border);
margin-top: 5px;
padding: 3px;
height: 50px;
border-radius: 10px;
}

#form_left {
height: 48px;
border: 0px solid var(--color-border);
padding-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 10px;
position: relative;
float: left;
}

#form_right {
border: 0px solid var(--color-border);
padding-top: 9px;
padding-bottom: 4px;
padding-left: 1px;
padding-right: 5px;
position: relative;
float: left;
color: transparent;
}

#form_right img {
	padding: 0px 2px;
}

.img_home.new_link {
	float: right;
	margin-left: 5px;
	padding-top: 9px;
	padding-bottom: 4px;
	padding-right: 15px;
}

#message, .input {
	border: 2px solid var(--color-border);
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	outline: none;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: var(--font-size-xlarge);
        background-color: #d6181800;
}

#privat_messages{
 position: absolute;
 top: 100px;
 left: 100px;
 background-color: #ccddcc;
 border: 1px solid black;
 padding: 5px;
}

.rooms{
 background-color: var(--color-button-zeilen);
 border: 1px solid black;
 padding: 1px;
 margin-bottom: 2px;
 cursor:pointer

}
.rooms_not_allowed{
 background-color: #efffe3;
 border: 1px solid #777777;
 color: #777777;
 padding: 1px;
 margin-bottom: 2px;
 cursor:pointer
}

.privat_ausg_an {
  background-color: rgba(255, 238, 238, 0.3); /* zartes Rosa, 80% Deckkraft */
  border: 2px solid #db0606;                  /* roter Rahmen */
}

.privat_ausg_von {
  background-color: rgba(144, 156, 144, 0.3); /* grünlich, 80% Deckkraft */
  border: 2px solid #035f03;                  /* grüner Rahmen */
}


#close_privat{
	cursor:pointer;
	background-color: #9598955e;
	font-size:  var(--font-size-xlarge);
	font-family: var(--font-family);
	font-style: normal;
	border: 1px solid black;
	padding-left:4px;
	padding-right:4px;
    border-radius: 5px;
}
#privat_anzeige{
	padding-bottom: 3px;
	height: 20px;
}
#privat_modus{
	font-size: var(--font-size-large);
}

.privat_mesages_window{
	height: 85%;
	padding:3px;
	border: 1px solid black;
	overflow: auto;
	background-color: #224bba;
	background-image:var(--img, none)
	background-repeat:no-repeat;
	background-position:bottom right;
}
.privat_win_button{
	cursor:pointer;
	font-weight:bold;
	border: 1px solid #000000;
	width: 190px;
	margin-top: 3px;
	background-color: #d7f3d1;
	text-align: center;
}

.colorpick{
     font-size: var(--font-size-base);
     cursor:pointer;
     border: 1px solid black;
     width: 100%;
}
.dialog{
	font-size: var(--font-size-small);
	font-family: var(--font-family);
	font-style: normal;
}

.img_button{
	cursor:pointer;
}

.private_message_field{
	width:270px;
	margin-top: 0px;
	border: 2px solid var(--color-border);
  	background-color: #161321;
  	margin-left: 5px;
}

a:link {font-size: var(--font-size-large); color:var(--color-link); text-decoration:underline;}
a:visited {font-size: var(--font-size-large);	color:var(--color-link); text-decoration:underline;}
a:active {font-size: var(--font-size-large); color:var(--color-link); text-decoration:underline;}
a:hover {font-size: var(--font-size-large); color:var(--color-link-hover); text-decoration:underline;}

/*------------ for history -----------------------*/
.kopf{ background-color: #2979bf; }
.gerade{ background-color: #232db7; }
.ungerade{ background-color:#0e156f; }
.privat_von{ background-color:#138113; }
.privat_nach{ background-color:#920808; }

/*------------ for adminbereich -----------------------*/
#adminbereich_body{
background-color:#050262;
color:var(--color-text-webfarbe);
font-size:  var(--font-size-base);
font-family: var(--font-family);
}
#adminbereich_body a:link {font-family:var(--font-family); font-size: var(--font-size-base); color:var(--color-link); text-decoration:underline;}
#adminbereich_body a:visited {font-family:var(--font-family); font-size: var(--font-size-base); color:var(--color-link); text-decoration:underline;}
#adminbereich_body a:active {font-family:var(--font-family); font-size: var(--font-size-base); color:var(--color-link); text-decoration:underline;}
#adminbereich_body a:hover {font-family:var(--font-family); font-size: var(--font-size-base); color:var(--color-link-hover); text-decoration:underline;}

.rot {
color: #f00;
}

/*------Smiley verschieben----------*/
.img_smiley {
    max-width: 100vh;       /* bleibt flexibel */
    max-height: 90px;      /* wie bisher */
    width: auto;             /* bleibt flexibel */
    height: auto;            /* bleibt flexibel */
    display: inline-block;   /* verhindert kurz Untereinander */
    min-height: 32px;        /* reserviert Mindesthöhe, verhindert Springen */
    min-width: 32px;         /* optional, verhindert extreme Breite bei sehr kleinen Bildern */
}

.img_verschieben {
  	cursor: grab;
	width: 25px;
	margin-left: 10px;
	margin-right: 10px;
}

.img_verschieben:active {
  cursor: grabbing;
}

/*---------------------------- for Window -------------------------*/
.overlay_etchat_dino_styles {
  background-color: rgba(255, 255, 255, 0.6); /* Weiß mit 60% Deckkraft */
}


.etchat_dino_styles_nw {
 border-left: 2px solid #888888;
 border-top: 2px solid #888888;
 border-bottom: 1px solid #888888;
  width:10px;
  height:18px;
  background-color: #d0ddd0;
}

.etchat_dino_styles_n {
  border-top: 2px solid #888888;
  border-bottom: 1px solid #888888;
  background-color: #d0ddd0;
}

.etchat_dino_styles_ne {
 border-right: 2px solid #888888;
 border-top: 2px solid #888888;
 border-bottom: 1px solid #888888;
  width:10px;
  height:18px;
  background-color: #d0ddd0;
}

.etchat_dino_styles_w {
 border-left: 1px solid #888888;
 width:2px;
  background-color: var(--color-border);
}

.etchat_dino_styles_e {
  border-right: 1px solid #888888;
  width:2px;
  background-color: var(--color-border);
}

.etchat_dino_styles_sw {
 border-left: 2px solid #888888;
 border-bottom: 2px solid #888888;
  width:10px;
  height:3px;
  background-color: #ddffdd;
}

.etchat_dino_styles_s  {
border-bottom: 2px solid #888888;
background-color: var(--color-border);
}

.etchat_dino_styles_se, .etchat_dino_styles_sizer {
 border-right: 2px solid #888888;
 border-bottom: 2px solid #888888;
  width:10px;
  height:3px;
  background-color: #ddffdd;
}

.etchat_dino_styles_sizer {
	cursor:se-resize;
}

.etchat_dino_styles_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;
}

.etchat_dino_styles_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;
}

.etchat_dino_styles_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;
}

.etchat_dino_styles_title {
	float:left;
	height:14px;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight:bold;
	text-align:left;
	margin-top:2px;
	width:100%;
	color:#666699;
}

.etchat_dino_styles_content {
	padding-top:5px;
	overflow:auto;
	font-family: var(--font-family);
	font-size:  var(--font-size-large);
	background-color:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),var(--color-backround);
	background-image:var(--img);
	background-repeat:no-repeat;
	background-position:bottom right;
}



.etchat_dino_styles_content a:link {font-family:var(--font-family); font-size: var(--font-size-large); color:var(--color-link); text-decoration:underline;}
.etchat_dino_styles_content a:visited {font-family:var(--font-family); font-size: var(--font-size-large); color:var(--color-link); text-decoration:underline;}
.etchat_dino_styles_content a:active {font-family:var(--font-family); font-size: var(--font-size-large); color:var(--color-link); text-decoration:underline;}
.etchat_dino_styles_content a:hover {font-family:var(--font-family); font-size: var(--font-size-large); color:var(--color-link-hover); text-decoration:none;}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
   border: none;
  width: 250px;
  height: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
      -webkit-linear-gradient(-45deg,
                              transparent 33%, rgba(0, 0, 0, .1) 33%,
                              rgba(0,0, 0, .1) 66%, transparent 66%),
      -webkit-linear-gradient(top,
                              rgba(255, 255, 255, .25),
                              rgba(0, 0, 0, .25)),
      -webkit-linear-gradient(left, #006633, #00ff66);

    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left,
      #006633,
      #00ff66
    );

  border-radius: 2px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

#Filesendmain{
 width: 90%;
 padding: 6px;
 overflow: hidden;
 background-image: linear-gradient(to top, rgba(241,255,238,0.50) 20%, rgba(241,255,238,0) 90%);
 border-radius: 8px;
 }

#fizfooter{
 color: #1f4f1e;
 font-size:  var(--font-size-small);
 }


#Avatarsendmain{
width: 90%;
padding: 6px;
overflow: hidden;
border-radius: 8px;
}

/*Avatar Upload*/

#post_file {
	background-color: var(--color-button-zeilen);
}

#save_button {
	background-color: var(--color-button-zeilen);
	color: var(--color-text-webfarbe);
}

#Avatar_Loeschen {
	background-color: var(--color-button-zeilen);
	color: var(--color-text-webfarbe);
}

/*Smileys*/

.ul_cat {
	list-style-type: none;
	position: sticky;
	top: -5px;
	margin-top: -5px;
	left: 0;
	margin-left: 0px;
	width: calc(100% - 15px);
	padding: 5px;
	text-align: center;
	border-bottom: 1px solid #333333;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
  	background-color: var(--color-button-hover);
}

.cat {
	background-color: var(--color-button-zeilen);
	display: inline-block;
	cursor: pointer;
	padding: 0px 0px;
	font-size: var(--font-size-xlarge);
	text-decoration: none;
	text-align: center;
	margin: 2px;
	font-size: var(--font-size-small);
}

.tabcontent {
  display: none;
  padding: 0px 10px;
  	margin-top: 5px;
	text-align: center;
}


/* Copyright */
.info {
  background-color: #000000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 75%;
  height: 90%;
  border: 1px solid #333333;
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Bildupload + Gallery Menue
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#fileA {
	background-color: var(--color-button-zeilen);
}


#Laden {
	background-color: var(--color-button-zeilen);
	color: var(--color-text-webfarbe);
}

.button {
	background-color: var(--color-button-zeilen);
  	color: var(--color-text-webfarbe);
}

.filesend-menubtn {
	border:none
	}
.filesend-menu {
	position: relative;
	display: inline-block;
	bottom: 0
	}
.filesend-menu-content {
	padding: 10px;
	border: 0px solid #333333;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.00);
	display: none;
	position: absolute;
	bottom: -10px;
	left: -10px;
	z-index: 100;
	transition: transform .2s
	}
.filesend-menu:hover .filesend-menu-content {
	display:block
	}
/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Gallery und User Profile Gallery
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.profile-container {
    max-width: 90%;
    background: #1a1a1a;
    padding: 5px;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #333333;
    margin: auto;
    color: white;
    margin-top: 10px;
}

.profile-beschreibung {
	width: 95%;
	border: 2px solid var(--color-border);
}

.profile-container-gal {
    max-width: 90%;
    background: #1a1a1a;
    padding: 5px;
    border-radius: 0px;
    box-shadow: 0px 0px 0px #333333;
    margin: auto;
    color: white;
}

.user-images {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.user-image {
	text-align: center;
	width: calc(20% - 10px);
	display: flex;
	flex-direction: column;
	color: #fff;
	background-color: #8080809e;
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Gallery
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px;
 }

.image-container {
  text-align: center;
  width: calc(20% - 10px);
  display: flex;
  flex-direction: column;
  background-color: var(--color-button-hover);
  border: 1px solid var(--color-border);
}

.meta {
  padding: 5px 0;
}

.image-wrapper {
  flex-grow: 1;                 /* nimmt den verfügbaren Platz ein */
  display: flex;
  align-items: center;          /* vertikal zentrieren */
  justify-content: center;      /* horizontal zentrieren */
  width: 100%;
}

.imgg {
  max-width: 95%;
  max-height: 100px;
  display: block;
}

.bottom {
  padding: 5px 0;
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
User Privilegen
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.kreis-buchstabe {
  display: inline-flex;
  width: 14px;              /* gleiche Größe wie dein original Bild */
  height: 14px;
  color: black;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-large);          /* passend zur Bildgröße */
  font-weight: bold;
  vertical-align: text-bottom; /* passt zu align="absbottom" */
  cursor: default;          /* sieht aus wie ein Icon, kein Link */
}

.kreis-buchstabe-c {
  display: inline-flex;
  width: 12px;              /* gleiche Größe wie dein original Bild */
  height: 12px;
  color: black;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);          /* passend zur Bildgröße */
  font-weight: bold;
  vertical-align: text-bottom; /* passt zu align="absbottom" */
  cursor: default;          /* sieht aus wie ein Icon, kein Link */
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Team Liste
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

        /* --- Tabs oben --- */
        .role-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
            flex-wrap: wrap;
        }
        .role-tab {
	        padding: 8px 15px;
	        border: 1px solid var(--color-border);
	        background: var(--color-button-zeilen);
	        cursor: pointer;
	        border-radius: 4px;
	        color: var(--color-text-webfarbe);
        }
        .role-tab.active {
	       background: var(--color-button-hover);
	       border: 3px solid var(--color-border);
        }

        /* Container für alle Karten */
        .compact-mod-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            align-items: flex-start;
            margin: 10px;
        }

        /* Einzelkarte */
        .compact-mod-card {
            flex: 1 1 300px;
            max-width: 400px;
            min-height: 200px;
            border: 2px solid var(--color-border);
            border-radius: 6px;
            padding: 10px;
            background: #3d45bf5e;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }

        .compact-mod-card .top-row {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px;
        }

        .compact-mod-card .avatar-mod {
            flex: 0 0 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 4px;
        }

        .compact-mod-card .avatar-mod img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .compact-mod-card .modinfo {
            line-height: 1.4em;
            flex: 1;
        }

        .compact-mod-card .beschreibung-full {
            width: 100%;
            margin-top: 8px;
            font-style:  var(--font-family);
            word-wrap: break-word;
            text-align: justify;
            hyphens: auto;
            max-height: 120px;
            overflow: auto;
            padding: 4px;
            border-radius: 4px;
        }

        .compact-mod-card .beschreibung-full a.show-full {
            color: #007bff;
            cursor: pointer;
            text-decoration: underline;
        }

        /* E-Mail und Ort umbrechen */
        .compact-mod-card .modinfo a,
        .compact-mod-card .modinfo {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Mobile */
        @media (max-width: 480px) {
            .compact-mod-card {
                flex: 1 1 90%;
                max-width: 90%;
                padding: 8px;
            }

            .compact-mod-card .modinfo {
                font-size: 10px;
            }

            .compact-mod-card .avatar-mod {
                flex: 0 0 60px;
                height: 60px;
            }

            .compact-mod-card .beschreibung-full {
                font-size: 10px;
                max-height: 100px;
            }
        }
/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Bewerbungs Formular
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

    .bewerbung-form { max-width: 650px; margin: 0 auto; background: var(--color-button-hover); padding: 20px; border-radius: 8px; }
    .bewerbung-form label { display: block; margin-top: 10px; font-weight: bold; }
    .bewerbung-form input[type="text"], .bewerbung-form input[type="email"], .bewerbung-form select, .bewerbung-form textarea { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 6px; }
    .bewerbung-form textarea { min-height: 120px; }
    .musikrichtungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
    .bewerbung-form button { margin-top: 15px; padding: 10px 20px; background: var(--color-button-zeilen); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
    .bewerbung-form button:hover { background: var(--color-button-hover); }
    .captcha-group { display: flex; align-items: center; gap: 10px; }
    .meldung { max-width: 650px; margin: 10px auto; padding: 10px; background: #ff0404d4; border-radius: 6px; text-align: center; }
    .pflichthinweis { color: red; margin-left: 3px; }
    .musikrichtungen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px;
}

.musikrichtung-option label {
    display: flex;
    align-items: center;
    gap: 5px;
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Titel Liste
++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#date {
	background-color: var(--color-button-zeilen);
	color: var(--color-text-webfarbe);
}

.radio-history {
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
}
.radio-history h3 {
    margin-bottom: 8px;
}
.radio-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.radio-history li {
    margin: 4px 0;
}
.radio-history .dj {
    color: #999;
    font-style: italic;
}
.pagination {
    margin-top: 10px;
}
.pagination a {
    margin: 0 4px;
    padding: 4px 8px;
    background: var(--color-button-zeilen);
    border-radius: 4px;
    text-decoration: none;
}
.pagination a.active {
    background: var(--color-button-zeilen);
    color: var(--color-button-zeilen);
}

/*
++++++++++++++++++++++++++++++++++++++++++++++++++
Top Liste
++++++++++++++++++++++++++++++++++++++++++++++++++
*/
        /* Normale Tabelle */
        .chat-table {
			width: 100%;
			border-collapse: separate;
			border-width: 2px;
			border-style: solid;
			border-color: var(--color-border);
			border-radius: 10px;
			overflow: hidden;
			padding: 10px;
			}
        .chat-table th, .chat-table td { padding: 8px 12px; border: 1px solid #666; text-align: center; }
        .chat-table th { background-color: var(--color-button-zeilen); }
        .chat-table tr:not(.top1):not(.top2):not(.top3):nth-child(even) { background-color: var(--color-button-hover); }
        .chat-table tr:hover { background-color: #555; }

		/* Top3 Farben */
        .top1 { background-color: #ffd700; color: #000; font-weight: bold; }
        .top2 { background-color: #c0c0c0; color: #000; font-weight: bold; }
        .top3 { background-color: #cd7f32; color: #fff; font-weight: bold; }