/* Kompaktere KPI-Karten auf der Übersichtsseite. */
.portal-page .kpi-grid{
  gap:8px!important;
  margin:12px 0!important;
}
.portal-page .kpi-card{
  min-height:92px!important;
  padding:12px 14px!important;
  border-radius:10px!important;
}
.portal-page .kpi-label{
  margin-bottom:7px!important;
  font-size:12px!important;
}
.portal-page .kpi-card strong{
  font-size:22px!important;
  line-height:1.05!important;
}
.portal-page .kpi-card small{
  margin-top:5px!important;
  font-size:11px!important;
  line-height:1.2!important;
}

/* Übersicht: Ertrag-pro-EUR- und Ertrag-pro-Sekunde-Panels vertikal verdichten. */
.portal-page .yield-progress-card{
  margin:10px 0!important;
  padding:12px 16px 10px!important;
}
.portal-page .yield-progress-head{
  margin-bottom:6px!important;
}
.portal-page .yield-progress-head h2{
  font-size:15px!important;
  line-height:1.15!important;
}
.portal-page .yield-progress-head p{
  margin-top:2px!important;
  font-size:11px!important;
  line-height:1.2!important;
}
.portal-page .yield-progress-value{
  font-size:22px!important;
  line-height:1!important;
}
.portal-page .yield-scale-wrap{
  padding-top:18px!important;
}
.portal-page .yield-scale{
  height:18px!important;
}
.portal-page .yield-marker{
  top:-21px!important;
}
.portal-page .yield-thresholds{
  margin-top:4px!important;
}
.portal-page .yield-progress-note{
  margin-top:6px!important;
  line-height:1.2!important;
}

.portal-page #profitPerSecondPanel{
  margin:10px 0!important;
  padding:12px 16px 10px!important;
  min-height:0!important;
}
.portal-page #profitPerSecondPanel .profit-second-scale-wrap{
  padding-bottom:24px!important;
}
.portal-page #profitPerSecondPanel .profit-second-scale{
  height:26px!important;
}
.portal-page #profitPerSecondPanel .profit-second-marker.today-marker{
  top:-21px!important;
}
.portal-page #profitPerSecondPanel .profit-second-lifetime-marker{
  top:28px!important;
}
.portal-page #profitPerSecondPanel .profit-second-target{
  top:-28px!important;
  bottom:-3px!important;
}
.portal-page #profitPerSecondPanel .profit-second-target-label{
  top:-2px!important;
  padding:4px 7px!important;
}
.portal-page #profitPerSecondPanel .profit-second-target.target-100k .profit-second-target-label{
  top:18px!important;
}
.portal-page #profitPerSecondPanel .profit-second-legend{
  margin-top:4px!important;
}
/* Rechen-/Erklärzeilen unterhalb der Sekundenskala ausblenden. */
.portal-page #profitPerSecondNote,
.portal-page #profitPerSecondLifetimeNote,
.portal-page #profitPerSecondPanel .profit-second-note,
.portal-page #profitPerSecondPanel .profit-second-lifetime-note{
  display:none!important;
}

/* Übersicht: Wochenchart vertikal kompakter darstellen.
   Die Null-Linie bleibt mittig im Plot; nur der bislang übergroße freie
   Bereich bis zu Wochentagen und Wochenstand wird deutlich reduziert. */
.portal-page #weeklyProfitPanel .weekly-profit-chart{
  height:180px!important;
  padding:10px 18px 4px!important;
}
.portal-page #weeklyProfitPanel .weekly-profit-day{
  grid-template-rows:minmax(0,1fr) 24px!important;
}
.portal-page #weeklyProfitPanel .weekly-profit-label{
  padding-top:4px!important;
}
.portal-page #weeklyProfitPanel .weekly-profit-note{
  padding:0 18px 10px!important;
}

@media(max-width:1200px){
  .portal-page .kpi-card{min-height:88px!important;padding:11px 12px!important}
  .portal-page .kpi-card strong{font-size:20px!important}
}

@media(max-width:620px){
  .portal-page .yield-progress-card,
  .portal-page #profitPerSecondPanel{padding:10px 12px 9px!important}
  .portal-page #profitPerSecondPanel .profit-second-scale-wrap{padding-bottom:22px!important}
  .portal-page #weeklyProfitPanel .weekly-profit-chart{height:168px!important;padding:8px 10px 2px!important}
  .portal-page #weeklyProfitPanel .weekly-profit-note{padding:0 10px 8px!important}
}


/* Übersicht: beide Donut-Zeilen vertikal kompakter. */
@media(min-width:1251px){
  .portal-page .chart-grid{
    gap:10px!important;
    margin:10px 0!important;
  }
  .portal-page .chart-card{
    min-height:0!important;
    height:210px!important;
    box-sizing:border-box!important;
    padding:12px 14px!important;
  }
  .portal-page .chart-title{
    margin-bottom:8px!important;
  }
  .portal-page .chart-layout,
  .portal-page .chart-card.profit .chart-layout{
    grid-template-columns:145px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .portal-page .donut{
    width:138px!important;
    height:138px!important;
  }
  .portal-page .donut:after{
    inset:25px!important;
  }
  .portal-page .donut-center strong{
    font-size:17px!important;
  }
  .portal-page .donut-center small{
    margin-top:3px!important;
  }
  .portal-page .chart-legend{
    gap:6px!important;
  }
}


/* Übersicht: Donut-Karten nochmals kompakter auf Desktop. */
@media(min-width:1251px){
  .portal-page .chart-grid{gap:8px!important;margin:8px 0!important}
  .portal-page .chart-card{height:172px!important;padding:9px 12px!important}
  .portal-page .chart-title{margin-bottom:5px!important;font-size:13px!important}
  .portal-page .chart-layout,
  .portal-page .chart-card.profit .chart-layout{grid-template-columns:118px minmax(0,1fr)!important;gap:9px!important}
  .portal-page .donut{width:112px!important;height:112px!important}
  .portal-page .donut:after{inset:21px!important}
  .portal-page .donut-center strong{font-size:15px!important}
  .portal-page .donut-center small{font-size:10px!important;margin-top:2px!important}
  .portal-page .chart-legend{gap:4px!important}
  .portal-page .legend-row{font-size:10px!important;gap:6px!important}
}


/* Übersicht: gewünschte feste Kartenhöhe 130 px auf Desktop. */
@media(min-width:1251px){
  .portal-page .chart-card{height:130px!important;padding:7px 10px!important}
  .portal-page .chart-title{margin-bottom:3px!important}
  .portal-page .chart-layout,
  .portal-page .chart-card.profit .chart-layout{grid-template-columns:88px minmax(0,1fr)!important;gap:7px!important}
  .portal-page .donut{width:82px!important;height:82px!important}
  .portal-page .donut:after{inset:15px!important}
  .portal-page .donut-center strong{font-size:13px!important}
  .portal-page .donut-center small{font-size:9px!important;margin-top:1px!important}
  .portal-page .chart-legend{gap:3px!important}
  .portal-page .legend-row{font-size:9px!important;gap:5px!important}
}


/* Übersicht: obere Donut-Zeile bewusst größer, zweite Zeile bleibt 130 px. */
@media(min-width:1251px){
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-card{
    height:180px!important;
    padding:10px 12px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-layout,
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-card.profit .chart-layout{
    grid-template-columns:125px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut{
    width:120px!important;
    height:120px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut:after{
    inset:22px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center strong{
    font-size:16px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center small{
    font-size:10px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .legend-row{
    font-size:10px!important;
  }
}


/* Übersicht: Schrift in den kompakten Diagrammkarten wieder besser lesbar. */
@media(min-width:1251px){
  .portal-page .chart-title{
    font-size:14px!important;
    line-height:1.2!important;
  }
  .portal-page .legend-row{
    font-size:11px!important;
    line-height:1.2!important;
  }
  .portal-page .chart-empty{
    font-size:11px!important;
    line-height:1.2!important;
  }
  .portal-page #overviewPeriodDonuts .donut-center strong{
    font-size:14px!important;
  }
  .portal-page #overviewPeriodDonuts .donut-center small{
    font-size:10px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center strong{
    font-size:18px!important;
  }
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center small{
    font-size:11px!important;
  }
}


/* Übersicht: Diagrammtypografie an die übrige App angleichen. */
@media(min-width:1251px){
  .portal-page .chart-title{font-size:16px!important;line-height:1.25!important}
  .portal-page .legend-row{font-size:13px!important;line-height:1.3!important;gap:7px!important}
  .portal-page .chart-empty{font-size:13px!important;line-height:1.3!important}
  .portal-page #overviewPeriodDonuts .donut-center strong{font-size:16px!important}
  .portal-page #overviewPeriodDonuts .donut-center small{font-size:11px!important}
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center strong{font-size:20px!important}
  .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-center small{font-size:12px!important}
}


/* Übersicht: Summenwerte stehen unterhalb der Donuts statt im Ring. */
.portal-page .donut-value-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0}
.portal-page .donut-value-below{display:flex;align-items:baseline;justify-content:center;gap:5px;width:100%;margin-top:5px;white-space:nowrap;color:var(--ui-text)}
.portal-page .donut-value-below strong{font-size:14px;line-height:1.15;font-weight:800}
.portal-page .donut-value-below small{font-size:10px;color:var(--ui-muted)}
@media(min-width:1251px){
 .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-value-below strong{font-size:16px!important}
 .portal-page .chart-grid:not(#overviewPeriodDonuts) .donut-value-below small{font-size:11px!important}
 .portal-page #overviewPeriodDonuts .donut-value-below{margin-top:3px}
 .portal-page #overviewPeriodDonuts .donut-value-below strong{font-size:13px!important}
 .portal-page #overviewPeriodDonuts .donut-value-below small{font-size:10px!important}
}


/* Übersicht: Summenzeile als zentrierter hellgrauer Kasten unter dem Diagramm. */
.portal-page .donut-value-below{
  box-sizing:border-box;
  min-height:30px;
  padding:5px 10px;
  border:1px solid #e1e6ec;
  border-radius:8px;
  background:#f1f3f6;
  text-align:center;
}
.portal-page .donut-value-below strong,.portal-page .donut-value-below small{text-align:center}


/* Übersicht: Summenbalken über die vollständige Kartenbreite. */
.portal-page .chart-card .chart-layout{position:relative;padding-bottom:38px}
.portal-page .chart-card .donut-value-wrap{display:contents}
.portal-page .chart-card .donut-value-wrap>.donut{grid-column:1;grid-row:1}
.portal-page .chart-card .donut-value-below{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0}


/* Übersicht: Summenbalken wirklich über die komplette Kartenbreite. */
.portal-page .chart-card{position:relative}
.portal-page .chart-card .chart-layout{position:static!important;padding-bottom:38px}
.portal-page .chart-card .donut-value-below{
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:7px!important;
  width:auto!important;
  margin:0!important;
  z-index:2;
}
@media(min-width:1251px){
 .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-card .donut-value-below{left:12px!important;right:12px!important;bottom:8px!important}
 .portal-page #overviewPeriodDonuts .chart-card .donut-value-below{left:10px!important;right:10px!important;bottom:7px!important}
}


/* Übersicht: Mehr vertikaler Platz für Donut, Legende und Summenbalken ohne Überlappung. */
@media(min-width:1251px){
 .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-card{height:200px!important}
 .portal-page #overviewPeriodDonuts .chart-card{height:150px!important}
 .portal-page .chart-card .chart-layout{padding-bottom:42px!important}
}


/* Übersicht: Feintuning – mehr Luft oberhalb des Summenbalkens. */
@media(min-width:1251px){
 .portal-page .chart-grid:not(#overviewPeriodDonuts) .chart-card{height:210px!important}
 .portal-page #overviewPeriodDonuts .chart-card{height:160px!important}
 .portal-page .chart-card .chart-layout{padding-bottom:46px!important}
}