.tank-chart {
    display: flex;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px; /* Abstand zwischen den Achsen */
}

.y-axis-item {
    margin-bottom: 20px; /* Abstand zwischen den Achsenbeschriftungen */
}   

.tank-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* oder ein anderer Wert, je nach Bedarf */
    align-items: flex-end; /* Damit alle Tanks von oben ausgerichtet werden */
    width: 100%;
}

.tk {
    position:relative;
    width:40%; 
    height:100px;
    padding-top:20px;
    margin: 20px;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;
    color: aliceblue;
}

.lq {
    position: absolute;
    background:rgba(128,128,128,0.99);
    width: 100%;
    height:0;
    bottom: 0;
    border-radius:100%/40px;
    border-bottom:3px solid #000;
    transition: height 2s ease-in-out; /* Übergang für die Höhe */
    overflow: hidden;
}

.ring {
    position: absolute;
    border-radius:100%/40px;
    top: 0;
    width: 100%;
    height:40%;
    content: '';
    border:1px solid #000;
}

.text {
  display: block;
  position:absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
}