body{
    font-family: Arial;
    margin:40px;
    text-align:center;
    background-color:#cdffcd;  
}

/* Grid für 10 Kessel */

.grid{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:40px;
    justify-items:center;
}

/* Mobil untereinander */

@media (max-width:900px){
    .grid{
        grid-template-columns:1fr;
    }
}

/* einzelne Kesselkarte */

.kessel-card{
    background:#ffffff;;
    padding:20px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
    width:280px;
}

/* Kessel */

.kessel-wrapper{
    position:relative;
    width:240px;
    height:300px;
    margin:0 auto;
}

.kessel{
    width:200px;
    height:300px;
    border:4px solid #333;
    margin:0 auto;
    position:relative;
    background:#eee;
}

/* Ventile */

.ventil{
    background:#555;
    font-size:12px;
    text-align:center;
    line-height:20px;
}

/* Steuerbox */

.controlbox{
    border:1px solid black;
    padding:10px;
    margin-top:10px;
    background:#f5f5f5;
}

button{
    margin:5px;
}

.kessel-overlay{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-weight: bold;
    text-align: center;
    pointer-events: none; /* verhindert dass die Zahlen Buttons blockieren */
}

.kessel-overlay div{
    margin: 5px 0;
    font-size: 38px;
}