.offgrid-tool{
max-width:950px;
margin:auto;
font-family:Arial;
}

.add-device{
display:flex;
gap:10px;
margin-bottom:20px;
}

.device{
border:1px solid #ccc;
padding:10px;
margin-bottom:20px;
border-radius:6px;
}

.device-header{
display:flex;
gap:8px;
width:100%;
margin-bottom:10px;
}

.device-name{
flex:2;
padding:6px;
}

.device-power{
flex:1;
padding:6px;
}

.device-header button{
flex:0 0 40px;
background:red;
color:white;
border:none;
cursor:pointer;
}

.hours{
display:grid;
grid-template-columns:repeat(24,1fr);
gap:3px;
margin-bottom:8px;
}

.hour{
padding:6px;
font-size:11px;
text-align:center;
cursor:pointer;
}

.days{
display:flex;
gap:3px;
margin-bottom:6px;
}

.days button{
flex:1;
border:none;
padding:5px;
cursor:pointer;
}

.months{
display:flex;
gap:3px;
}

.months button{
flex:1;
border:none;
padding:5px;
cursor:pointer;
}

.chart-controls{
margin-bottom:10px;
}

#consumptionChart {
  width: 100%;
  height: 300px;  /* gewünschte Höhe */
  max-height: 400px;
}