/* ------------- */ 
/* Chart Styles / DIAGRAMME*/ 
/* --------------*/ 

:root {
    --piechart-width: 340px;
}

.chart-container{
  padding-left: 5rem;
}




@media screen and (max-width: 1240px) {
    .chart-container {
        max-width: 80%;
        padding-left: 2rem;
    }
}



@media screen and (max-width: 1055px) {
  .chart-container {
    left: calc(50% - (var(--piechart-width) / 2));
    max-width: var(--piechart-width);
    padding-left: 0;
  }
  }


.pie-chart{
  --size: clamp(300px, 300px, 300px);
  --inner: 30px;
  --outer: 100px;
  --headroom:40px;                    /* wird per JS gesetzt */
  height: calc(var(--size) + var(--headroom)); /* Platz für H3 oben */
  position: relative;
  align-items: center;
  /* aspect-ratio hier weglassen, Höhe wird nun explizit gesetzt */
  padding-bottom: 30px;
  display: inline-block;  /* verhindert 100%-Weite */
  text-align: center;     /* zentriert die Legende */
  width: var(--piechart-width);
}

.pie-chart figcaption {
  margin-top: 15rem;     /* Abstand nach der Torte */
  display: block;
}
.pie-chart h3 {
text-align: center;
font-size: 1.5rem;
}

.pie-chart .labels span {
  font-size: .7rem;
}



.pie-chart::before{
  content:"";
  position:absolute;
  inset: var(--headroom) 0 0 0;       /* Donut unter die Überschrift schieben */
  background: var(--conic);
  -webkit-mask: radial-gradient(circle closest-side,
      transparent 0 var(--inner),
      #000        var(--inner) var(--outer),
      transparent var(--outer));
  mask: radial-gradient(circle closest-side,
      transparent 0 var(--inner),
      #000        var(--inner) var(--outer),
      transparent var(--outer));
}


/* Nur Elemente über dem Kuchen sichtbar halten */
.pie-chart > *{ position:relative; z-index:1; }

/* Label-Ebene im Kreis, Prozent % Angaben */
.pie-chart .labels{
  position:absolute;
  inset: var(--headroom) 0 0 0;
  display:grid; place-items:center;
  pointer-events:none;
}

/* Bunte Kästchen NUR in der Legende, nicht bei Labels */
.pie-chart figcaption span::after{
  content:"";
  display:inline-block;
  width:.8em;
  height:.8em;
  margin-left:.4em;
  border-radius:.2em;
  background: currentColor;
}

figure.pie-chart{
  margin:2rem auto;
  /* margin-top:4rem; */
  /* margin-bottom:4rem; */
}