/*
 * =========================================
 * HAUPTBOX
 * =========================================
 */

.pv-anlage {

  max-width: 900px;

  margin: 30px auto;

  padding: 28px;

  box-sizing: border-box;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 4px 20px rgba(0,0,0,0.08);

}


/*
 * =========================================
 * KOPF
 * =========================================
 */

.pv-kopf {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 25px;

}


.pv-kopf h2 {

  margin: 0 0 6px 0;

  font-size: 25px;

}


.pv-kopf p {

  margin: 0;

  font-size: 15px;

  opacity: 0.65;

}


.pv-status {

  font-size: 13px;

  white-space: nowrap;

  opacity: 0.65;

}


/*
 * =========================================
 * AKTUELLE LEISTUNG
 * =========================================
 */

.pv-aktuell {

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 25px;

  margin-bottom: 18px;

  border-radius: 15px;

  background: #f7f7f7;

}


.pv-sonne {

  font-size: 48px;

}


.pv-leistung {

  font-size: 42px;

  font-weight: 700;

  line-height: 1;

}


.pv-leistung small {

  font-size: 18px;

  font-weight: 400;

}


.pv-label {

  margin-top: 8px;

  font-size: 14px;

  opacity: 0.6;

}


/*
 * =========================================
 * TAGES-, MONATS- UND JAHRESWERTE
 * =========================================
 */

.pv-werte {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;

}


.pv-wert {

  padding: 20px 15px;

  text-align: center;

  border-radius: 15px;

  background: #f7f7f7;

}


.pv-wert-titel {

  margin-bottom: 10px;

  font-size: 14px;

  opacity: 0.6;

}


.pv-wert-zahl {

  font-size: 23px;

  font-weight: 700;

}


.pv-wert-zahl small {

  font-size: 13px;

  font-weight: 400;

}


/*
 * =========================================
 * DIAGRAMME
 * =========================================
 */

.pv-diagramme {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;

  margin-top: 22px;

}


.pv-diagramm {

  padding: 20px;

  border-radius: 15px;

  background: #f7f7f7;

}


.pv-diagramm h3 {

  margin: 0 0 18px 0;

  font-size: 17px;

}


/*
 * =========================================
 * DIAGRAMMFLÄCHE
 * =========================================
 */

.pv-chart-container {

  width: 100%;

  height: 220px;

}


.pv-chart {

  display: flex;

  align-items: stretch;

  gap: 8px;

  width: 100%;

  height: 100%;

  border-bottom:
    1px solid #dcdcdc;

}


/*
 * =========================================
 * BALKEN
 * =========================================
 */

.pv-chart-column {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}


.pv-chart-bar-area {

  flex: 1;

  min-height: 0;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}


.pv-chart-bar {

  width: 70%;

  min-height: 3px;

  border-radius:
    6px 6px 0 0;

  background: #f5b400;

  transition:
    opacity 0.2s,
    transform 0.2s;

}


.pv-chart-bar:hover {

  opacity: 0.75;

  transform:
    scaleX(1.08);

}


/*
 * =========================================
 * KEINE DATEN
 * =========================================
 */

.pv-chart-empty {

  width: 70%;

  height: 3px;

  border-radius: 3px;

  background: #dddddd;

}


/*
 * =========================================
 * BESCHRIFTUNG DER BALKEN
 * =========================================
 */

.pv-chart-label {

  height: 28px;

  padding-top: 7px;

  box-sizing: border-box;

  text-align: center;

  font-size: 11px;

  opacity: 0.65;

}


/*
 * =========================================
 * BESCHREIBUNG
 * =========================================
 */

.pv-beschreibung {

  margin-top: 22px;

  padding-top: 18px;

  border-top:
    1px solid #eeeeee;

  font-size: 14px;

  line-height: 1.6;

  opacity: 0.7;

}


/*
 * =========================================
 * AKTUALISIERUNGSZEIT
 * =========================================
 */

.pv-aktualisierung {

  margin-top: 15px;

  font-size: 12px;

  opacity: 0.5;

}


/*
 * =========================================
 * MOBIL
 * =========================================
 */

@media (max-width: 700px) {

  .pv-anlage {

    margin: 15px 0;

    padding: 20px;

    border-radius: 12px;

  }


  .pv-kopf {

    display: block;

  }


  .pv-status {

    margin-top: 10px;

  }


  .pv-leistung {

    font-size: 36px;

  }


  .pv-werte {

    grid-template-columns: 1fr;

  }


  /*
   * Auf dem Handy untereinander,
   * damit die Diagramme nicht zu schmal werden.
   */

  .pv-diagramme {

    grid-template-columns: 1fr;

  }


  .pv-chart-container {

    height: 200px;

  }


  .pv-chart {

    gap: 4px;

  }


  .pv-chart-bar {

    width: 75%;

  }

}

/*
 * =========================================
 * LEISTUNGSKURVE
 * =========================================
 */

.pv-power-chart-box {

  margin-top: 18px;

  padding: 20px;

  border-radius: 15px;

  background: #f7f7f7;

}


.pv-power-chart-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  margin-bottom: 10px;

}


.pv-power-chart-header h3 {

  margin: 0;

  font-size: 17px;

}


.pv-power-max {

  font-size: 12px;

  opacity: 0.65;

  white-space: nowrap;

}


.pv-power-chart-container {

  width: 100%;

  height: 280px;

}


.pv-power-svg {

  display: block;

  width: 100%;

  height: 100%;

  overflow: visible;

}


.pv-power-grid {

  stroke: #dddddd;

  stroke-width: 1;

}


.pv-power-line {

  fill: none;

  stroke: #f5b400;

  stroke-width: 3;

  stroke-linejoin: round;

  stroke-linecap: round;

}


.pv-power-dot {

  fill: #f5b400;

}


.pv-power-hit {

  fill: transparent;

  stroke: none;

  cursor: pointer;

}


.pv-power-axis {

  fill: currentColor;

  font-size: 11px;

  opacity: 0.55;

}


.pv-power-chart-info {

  margin-top: 5px;

  font-size: 11px;

  opacity: 0.5;

}


@media (max-width: 700px) {

  .pv-power-chart-header {

    display: block;

  }


  .pv-power-max {

    margin-top: 5px;

  }


  .pv-power-chart-container {

    height: 230px;

  }

}