*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html,
body {
  height: 100%;
  margin: 0;
  padding: 0px;
  font-family: helvetica;
}
body>div {
  padding: 0 10px 0 10px;
}
ul,li {
  list-style:none;
  margin:0;
  padding:0;
}
h1 {
  max-width:600px;
  margin: 10px 0 10px;
  text-align:center;
}
.mini_layer {
  width:75px;
  height:30px;
  background-color:#fff;
  padding:4px;
  border:1px solid #999;
  display:none;
  font-size:11px;
  margin-top:-30px;
}
.tick {
  position:absolute;
  background-color:transparent;
  border:0px;
  border-right:1px solid #a00;
  height:5px;
  bottom:0px;
}
.tick.major {
  height:10px;
  border-right:2px solid #a00;
} 
.spannung {
  max-width:600px;
  margin-bottom:10px;
  position: relative;
  font-size:24pt
}
.soc {
  max-width:600px;
  text-align:center;
  font-size:48pt;
  margin-top:40px;
  /* position: relative; */
}
.spannung span,
.soc span {
  display:block;
  position:absolute;
  right:10px;
  top:0px;
}
span.links {
  left:0px;
  right:auto;
  position:relative;
  display:inline-block;
}
span.klein {
  position:relative;
  display:inline-block;
  font-size:12pt;
}
span.mittel {
  display:inline-block;
  position:relative;
  font-size:15pt;
}
span.wert.odo_lastcharge {
  top:auto;
  bottom:0px;
}
.zeit,.delta {
  max-width:600px;
  text-align:center;
  font-size:18pt;
  margin-bottom:30px
}
.zeit {
  font-size:10pt;
  margin-bottom:15px;
}
.bat_level {
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  background-color:#fff;
  z-index:-1;
}
.bat_level_background {
  position:fixed;
  bottom:0px;
  left:0px;
  height:100%;
  z-index:-1;
  background-color:#1cd01b;
}
.graphPane.charge {
  background-color:#fdbb01;
  /* animation: wachse 2s infinite; */

}
@keyframes wachse {
  0% {
    opacity:0.5;
  }
  70% {
    opacity:1;
  }
  100% {
    opacity:0.5;
  }
  
}
.graphPane {
  width:100%;
 margin:20px 0 0 0;
 background-color:#1cd01b;
}
.graphPane .graph {
  position:relative;
  width:100%;
  height:150px;
  z-index: 100;
  border:1px solid;
}
.graphPane .graph .xaxis {
  position: absolute;
  width:100%;
  top:150px;
  left:0px;
}
.graphPane .graph .xaxis .tick {
  position:absolute;
  top:0px;
}
.graphPane .graph .punkt {
  position:absolute;
  width:4px;
  height:4px;
  margin-left:-2px;
  margin-top:-2px;
  background-color:#900;
  border-radius:2px;
  border:1px solid #900;
}
div.svg {
  /* margin-top:200px; */
 width: 100%;
   
   resize: both;

}
svg {
  height:100%;
  width:100%;
}
path#soc_verlauf {
  fill:none;
  stroke:#900;
  stroke-width:1px;
}
path#grid {
  fill:none;
  stroke:#f33;
  stroke-width:0.1px;
}
span.wert {
  border:0px;
}
.zellspannungen,.verbrauch {
  height:40px;
  border: 1px solid #000;
  position:relative;
  margin-bottom:10px;
  overflow:hidden;
}
.zellspannungen .min,
.zellspannungen .max,
.verbrauch .act_verbrauch {
  position:absolute;
  left:calc(50% - 10%);
  height:38px;
  padding-top:5px;
  background-color:#aef;
  color:#000;
  text-align: center;
  vertical-align: center;
  border-left:2px solid #000;
  border-right:0px;
  transition: width 0.8s ease;
}
.verbrauch .act_verbrauch.negativ {
  border-left:0px;
  border-right:2px solid #000;
}
.verbrauch .act_verbrauch {
  background-color:#fd0;
  text-wrap: nowrap;
}
.zellspannungen .max {
  left: 50%;
  border-left:4px solid #38b;
  border-right:2px solid #000;
}
.link {
  margin-top:30px;
  margin-bottom:30px;
  font-size:14pt;
}
.slider {
  /* background-color:#feb; */
  margin: 15px 0 15px;
}
.slide {
  background-color:#feb;
}
.container {
  width: 100%;
  margin-top:10px;
}

.slider-wrapper {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  background-color:#feb;
  cursor: grab;
  user-select: none;
}
.slider-wrapper:active { cursor: grabbing; }

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.slide {
  min-width: 100%;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;

  justify-content: center;
  gap: 12px;
  min-height: 220px;

}

.slide-number {
  font-size: 56px;
  font-weight: 500;
  color: #111;
  line-height: 1;
}

.slide-label {
  font-size: 15px;
  color: #666;
  text-align: center;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  border: none;
  padding: 0;
}

.dot.active {
  background: #111;
  transform: scale(1.25);
}

.nav-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom:20px;
  gap: 8px;
}

.nav-btns button {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-btns button:hover { background: #f0f0f0; }
.nav-btns button:active { background: #e8e8e8; }