.spieler-box {
width:23%;}

.stats-block {
    width: 100%;
	padding:40px;
	box-sizing:border-box;
    margin: 0 40px;
}

.wesen-block {
    display: flex;
    justify-content: space-between; 
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap; /* bei kleinen Bildschirmen umbrechen */
}


/* Eine Zeile: flex für zwei Items */
.list-row {
    display: flex;
    gap: 20px; /* Abstand zwischen links und rechts */
    margin-bottom: 10px;
}

.list-avatar {
padding:5px 20px;
font-size:14px;
	color:var(--golden);
	margin-top:2px;
}

/* Einzelnes Item: Titel + Wert */
.list-item {
    flex: 1; /* gleichmäßig verteilen */
    display: flex;
    flex-direction: column;
}

.list-titel {
    font-weight: bold;
    margin-bottom: 2px;
	padding:10px;
	font-size:16px; 
	text-align:right;
	color:var(--golden);
	border-bottom:2px solid var(--golden);
}

.list-feld {
    padding: 6px 10px;
font-weight:bold;
width:300px;
	font-size:20px;
	text-align:center;
	color:var(--golden);
}

/* Container */
.rassen-diagramm {
  width: 500px;
  margin: 30px auto;
}

/* einzelne Balken */
.rassen-balken {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.rassen-label {
  width: 100px;
  font-weight: bold;
	font-size:15px;
	margin-left:30px;
	color:var(--golden);
}

.rassen-bar-wrap {
  flex: 1;
  height: 24px;
  background: var(--back);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
	padding:2px;
}

.rassen-bar-fill {
  height: 100%;
  display: block;
  border-radius: 6px;
  text-align: right;
  padding-right: 6px;
  font-size: 12px;
  line-height: 24px;
  color: var(--back);
	font-weight:bold;

}

/* Farben pro Gruppe */
.mensch { background:var(--golden); width: calc(var(--rassen-mensch) / var(--rassen-max) * 100%); }
.vampir { background:var(--golden); width: calc(var(--rassen-vampir) / var(--rassen-max) * 100%); }
.werwolf { background:var(--golden); width: calc(var(--rassen-werwolf) / var(--rassen-max) * 100%); }
.gestaltwandler { background:var(--golden); width: calc(var(--rassen-gestaltwandler) / var(--rassen-max) * 100%); }
.hexe { background:var(--golden); width: calc(var(--rassen-hexe) / var(--rassen-max) * 100%); }

.rassen-anzahl {
  width: 36px;
  text-align: right;
	font-weight: bold;}