/* Container für eine einzelne Profession */
.profession {
    display: flex;
    flex-direction: column;
    align-items: center;       /* zentriert den Namen und die Balken */
    gap: 8px;                  /* Abstand zwischen Name und Balken */
    margin: 10px;
    background-color: var(--light-grayblue); /* optional, schöner Hintergrund */
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
}

/* Name der Profession */
.professionname {
    height: 45px;
    display: flex;
    align-items: center;       /* vertikal zentriert */
    justify-content: center;   /* horizontal zentriert */
    font-size: 20px;
    text-align: center;
}

/* Jeder Balken + Tierbild */
.barline {
    display: flex;
    align-items: center;
    gap: 8px;                  /* Abstand zwischen Balken und Tierbild */
    width: 100%;
}

/* Hintergrund des Skillbalkens */
.barbackground {
    flex: 1;                   /* nimmt den verfügbaren Platz ein */
    background-color: var(--dark-grayblue);
    height: 30px;
    border-radius: 8px;
    position: relative;         /* für Text über Balken */
    overflow: hidden;
}

/* Fortschrittsbalken */
.bar {
    background-color: var(--lighter-grayblue);
    height: 100%;
    border-radius: 8px 0 0 8px;
}

/* Text im Balken */
.bartext {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    pointer-events: none;       /* Text blockiert keine Klicks, falls nötig */
}

/* Tierbild rechts vom Balken */
.tiername {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
}

.tierimg {
    height: 16px;
}

/* Clear ist hier nicht mehr nötig, Flex/Grid regelt alles automatisch */
.clear {
    display: none;
}