/**
 * assets/css/vx-donut-chart.css
 * Globale Styles für alle Donut-Charts
 */

/* Container: passt sich in der Breite dem Elternelement an */
.donut-block {
  width: 100%;
  max-width: 560px;    /* optional: maximale Breite */
  margin: 1em auto;    /* zentriert mit etwas Abstand oben/unten */
}

/* SVG skaliert fluid dank viewBox */
.donut-block svg {
  width: 100%;
  height: 400px;
  display: block;
}

/* Grundring hinter den Segmenten */
.donut-block circle[stroke="#eee"] {
  stroke-width: 13;
}

/* Donut-Segmente */
.donut-block .donut-segment {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
  transition: stroke-dasharray 1s ease-out, opacity 1s;
}

/* Verbindungslinien */
.donut-block .line {
  stroke: #999;
  stroke-width: 0.4;
}

/* Labels */
.donut-block .label {
  fill: #003064;
  font-size: 8px;
}

/* Fettgedruckte Labels (Prozentwerte außen) */
.donut-block .label-bold {
  font-weight: 600;
  fill: #ff5f00;
}

/* Zentrierte Werte im Inneren */
.donut-block .center-label {
  text-anchor: middle;
  fill: #003064;
}
.donut-block .center-label.value {
  font-size: 12px;
  font-weight: 600;
}
.donut-block .center-label.percent {
  font-size: 10px;
  font-weight: 400;
}

/* Responsive Anpassungen */
@media only screen and (max-width: 767px) {
  .donut-block .donut-segment {
    stroke-width: 9;
  }
  .donut-block .center-label.value {
    font-size: 14px;
  }
  .donut-block .center-label.percent {
    font-size: 12px;
  }
  .donut-block .label {
    font-size: 10px;
  }
  .donut-block .label-bold {
    font-size: 14px;
  }
  .donut-block svg {
    height: 250px;
  }
}