/* Gemeinsame Bausteine der Statistik (PPAPP-213). Vorher war .stat-card in drei Komponenten verschieden definiert,
   und welche Regel galt, hing davon ab, welcher Reiter schon geladen war. Farben nur über die Theme-Variablen. */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
/* Kachelgruppen mit fester Spaltenzahl je Kachelzahl, damit keine Kachel allein in einer Reihe steht (PPAPP-219). Die
   Breite misst die Gruppe selbst (Container-Query), nicht das Fenster: Seitenleiste und Zoom ändern sie. */
.stat-group { container-type: inline-size; }
.stat-grid-n { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.stat-grid-n.n1 { grid-template-columns: minmax(0, 22rem); }
@container (min-width: 520px) { .stat-grid-n.n2, .stat-grid-n.n4, .stat-grid-n.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 760px) { .stat-grid-n.n3, .stat-grid-n.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 880px) { .stat-grid-n.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.stat-group-head h2 { margin: 0; }
.stat-cards { display: grid; gap: 18px; }
/* Nur für Screenreader; hier, weil der Platzhalter beim Laden (PPAPP-217) ohne die anderen Bausteine erscheint. */
.stat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stat-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.stat-card h2 { margin: 0; }
.stat-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.stat-card-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--mud-palette-text-primary); }
/* Jede Karte nennt ihren Zeitraum selbst (PPAPP-219). */
.stat-card-period { margin: 2px 0 0; color: var(--mud-palette-text-secondary); font-size: 0.875rem; font-weight: 500; }
.stat-card-hint { margin: 0; color: var(--mud-palette-text-secondary); font-size: 0.8125rem; }
/* Kennzahlen als Blöcke mit Trennstrich; Zusatzwerte (Bestand, Aufteilung) mit Abstand und kräftigerem Strich. */
.stat-card-kpis { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; font-variant-numeric: tabular-nums; }
.stat-kpi { padding: 0 16px; border-left: 1px solid var(--mud-palette-lines-default); }
.stat-kpi:first-child { padding-left: 0; border-left: 0; }
.stat-kpi-detail { margin-left: 16px; border-left: 2px solid var(--mud-palette-text-secondary); }
.stat-kpi dt { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.stat-kpi dd { margin: 0; color: var(--mud-palette-text-primary); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.stat-card-kpis-small { margin: 4px 0 8px; }
.stat-card-kpis-small .stat-kpi { padding: 0 12px; }
.stat-card-kpis-small .stat-kpi:first-child { padding-left: 0; }
.stat-card-kpis-small .stat-kpi dd { font-size: 1rem; }
.stat-card-note { margin: 0; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.stat-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 8px; }
.stat-card-foot details { flex: 1 1 320px; }

/* Segment-Knöpfe (Kennzahl wählen) im Stil der Zeitraumwahl. */
.stat-seg { display: flex; flex-wrap: wrap; }
.stat-seg button {
    min-height: 40px; padding: 0 14px; margin-left: -1px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font: inherit; font-size: 0.875rem; font-weight: 500;
}
.stat-seg button[aria-pressed="true"] { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary); }
/* Zusammenhängende Gruppe in der Leiste (PPAPP-221, Entwurf „Leiste A“): gleich hoch wie die Felder daneben. */
.stat-seg-compact { flex-wrap: nowrap; }
.stat-seg-compact button { min-height: 34px; padding: 0 10px; margin-left: 0; border-left-width: 0; font-weight: 600; font-size: 0.8125rem;
    color: var(--mud-palette-primary); white-space: nowrap; }
.stat-seg-compact button:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.stat-seg-compact button:last-child { border-radius: 0 8px 8px 0; }
.stat-seg-compact button:disabled { cursor: not-allowed; color: var(--mud-palette-text-disabled); background: var(--mud-palette-background); }
.stat-seg button:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 1px; position: relative; z-index: 1; }

/* Werte als Tabelle unter jedem Diagramm. */
.stat-table { overflow: auto; max-height: 360px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.stat-table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.stat-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stat-table th, .stat-table td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 0.875rem; white-space: nowrap; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { position: sticky; top: 0; background: var(--mud-palette-background); font-weight: 600; }

/* Kleine Diagramme je Reihe (PPAPP-220): je eine Achse, zwei Spalten ab Tablet. */
.stat-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 640px) { .stat-panels { grid-template-columns: minmax(0, 1fr); } }
.stat-panel { margin: 0; min-width: 0; }
.stat-panel figcaption { font-size: 0.8125rem; font-weight: 500; color: var(--mud-palette-text-primary); margin-bottom: 4px; }

/* Hochzählen (PPAPP-220): Der Endwert hält Platz und bleibt für Screenreader im DOM, die laufende Zahl liegt darüber. */
.stat-countup { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.stat-countup-ticker { position: absolute; inset: 0; white-space: nowrap; }
.stat-countup.counting .stat-countup-final { color: transparent; }

/* Zeitraum-Leiste unter den Reitern (PPAPP-221): auf jedem Reiter gleich hoch, beim Scrollen unter der App-Leiste
   angeheftet. Die Mindesthöhe der Zeile passt für die Datumsfelder des frei gewählten Zeitraums. Angeheftet nur auf großen
   Flächen: Auf dem Handy und bei 200 % Zoom bricht die Leiste um und verdeckte sonst ein Viertel des Bildschirms. */
.stat-tabs .mud-tabs-panels { overflow: visible; }
@media (min-width: 900px) and (min-height: 480px) {
    .stat-bar { position: sticky; top: var(--mud-appbar-height); z-index: 3; }
    /* Fokus nicht verdeckt (WCAG 2.4.11): Beim Tabben scrollt der Browser fokussierte Elemente unter die Leiste. */
    :root:has(.stat-bar) { scroll-padding-top: calc(var(--mud-appbar-height) + 150px); }
}
.stat-bar {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
}
.stat-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; }
.stat-bar-presets, .stat-bar-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stat-bar-caption { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-right: 4px; }
.stat-bar-hint { margin: 0; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.stat-bar-dates .mud-input-control { margin-top: 0; }
.stat-bar-export { margin-left: auto; }
.stat-bar-csv { height: 36px; }
.stat-bar-range { margin: 0 0 0 auto; min-height: 20px; font-size: 0.8125rem; line-height: 20px; color: var(--mud-palette-text-secondary); }
.stat-bar-tab { min-height: 40px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mud-palette-lines-default); }
.stat-bar-tab .mud-input-control { margin: 0; }
.stat-bar-date { width: 11.5rem; flex: none; }
.stat-bar-dates-sep { color: var(--mud-palette-text-secondary); }
.stat-bar-range .stat-bar-hint { font-size: inherit; }

/* Filterknöpfe (Entwurf „Statistik-Filterleiste“, Variante B): alle 36 px hoch und gleich gebaut. Auf dem Handy brechen
   sie um und sind dann je eine volle Zeile breit; lange Werte enden mit „…“. */
.stat-filter { min-width: 0; max-width: 100%; }
.stat-filter > .mud-tooltip-root { display: block; max-width: 100%; }
.stat-filter-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 100%; padding: 0 8px 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px; background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.stat-filter-btn:hover { border-color: var(--mud-palette-text-primary); }
.stat-filter-btn:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-filter-btn[aria-expanded="true"] { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.stat-filter-btn[aria-disabled="true"] { padding-right: 12px; background: var(--mud-palette-background); cursor: default; }
.stat-filter-btn[aria-disabled="true"]:hover { border-color: var(--mud-palette-lines-inputs); }
.stat-filter-caption { color: var(--mud-palette-text-secondary); font-weight: 400; }
.stat-filter-value { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.stat-filter-caret { margin-left: -4px; }
@media (max-width: 599.98px) {
    .stat-bar-filters > .stat-filter, .stat-bar-export { flex: 1 1 100%; }
    .stat-filter-btn, .stat-bar-export .mud-tooltip-root, .stat-bar-csv { width: 100%; }
    .stat-filter-value { max-width: none; flex: 1 1 auto; text-align: left; }
}

/* Aufklapper: passt in die Breite der Leiste (je Seite 16 px Rand der Seite und 17 px Rand und Innenabstand der Leiste);
   die Chip-Liste der Portale scrollt in sich. Bricht die Schnellwahl um, steht jeder Knopf für sich. */
.stat-filter-pop { --stat-pop-max: min(calc(100vw - 66px), 640px); max-width: var(--stat-pop-max); border-radius: 12px; }
.stat-filter-panel { display: grid; gap: 12px; padding: 14px; width: max-content; max-width: var(--stat-pop-max); }
.stat-filter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 699.98px) {
    .stat-filter-panel .stat-seg-compact { flex-wrap: wrap; gap: 6px; }
    .stat-filter-panel .stat-seg-compact button { border-left-width: 1px; border-radius: 8px; }
    .stat-filter-panel .stat-bar-dates-sep { display: none; }
}

/* Portale im Aufklapper (PPAPP-218): Suchfeld, darunter die gewählten Portale als Chips. */
.stat-portals { display: grid; gap: 12px; width: min(calc(var(--stat-pop-max) - 28px), 420px); }
.stat-portals .mud-input-control { margin: 0; }
.stat-chips { list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
              max-height: 200px; overflow-y: auto; }
.stat-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; max-width: 100%; padding: 0 4px 0 12px; border-radius: 16px;
             background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-primary); color: var(--mud-palette-text-primary);
             font-size: 0.875rem; }
.stat-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-chip-all { padding-right: 12px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.stat-chip-remove { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
                    border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.stat-chip-remove:hover { background: var(--mud-palette-action-default-hover); }
.stat-chip-remove:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 1px; }

/* Platzhalter beim Laden (PPAPP-221): erst nach 300 ms sichtbar, damit schnelle Antworten nicht flackern; Schimmer nur
   ohne reduzierte Bewegung. Sie sind Zierde (aria-hidden), Kontrast zählt deshalb nicht. */
.stat-ph {
    display: inline-block;
    width: var(--stat-ph-w, 6ch);
    max-width: 100%;
    height: var(--stat-ph-h, 0.9em);
    vertical-align: middle;
    border-radius: 6px;
    background-color: var(--mud-palette-lines-default);
    opacity: 0;
    animation: stat-ph-show 0s linear 300ms forwards;
}
.stat-ph-block { display: block; border-radius: 12px; }
.stat-ph-lg { height: 1.6rem; }
.stat-ph-hero { height: clamp(2.75rem, 8vw, 4.5rem); }
.stat-ph-bar { display: block; height: 100%; }
.stat-ph-chart { display: block; width: 100%; height: 100%; border-radius: 8px; }
.stat-help-pending { display: inline-block; min-height: 24px; font-size: 0.8125rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
@keyframes stat-ph-show { to { opacity: 1; } }
@keyframes stat-ph-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: no-preference) {
    .stat-ph {
        background-image: linear-gradient(90deg, transparent 30%, var(--mud-palette-surface) 50%, transparent 70%);
        background-size: 200% 100%;
        background-repeat: no-repeat;
        animation: stat-ph-show 0s linear 300ms forwards, stat-ph-shimmer 1.6s ease-in-out 300ms infinite;
    }
    .stat-hero .stat-ph { background-image: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); }
}

/* Abzeichen an gesperrten Reitern für SuperAdmins (ADR 0092): Schloss und Wort, nicht Farbe allein. Text in der Signalfarbe
   auf ihrer Tönung, beide Paare prüft AdminThemeTests. */
.stat-tab-badge {
    display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 1px 8px 1px 4px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.4; text-transform: none;
    background: var(--lr-tint-warning); color: var(--mud-palette-warning);
}
.stat-tab-badge .mud-icon-root { font-size: 1rem; }
.stat-tab-badge-released { background: var(--lr-tint-success); color: var(--mud-palette-success); }

/* Teile von Kachel (StatTileCard) und Gruppenkarte (StatGroupPanel). */
.stat-tile-sub { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); min-height: 1.1em; }
.stat-delta { font-size: 0.75rem; line-height: 18px; font-weight: 500; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.stat-delta-good { background: var(--lr-tint-success); color: var(--mud-palette-success); }
.stat-delta-bad { background: var(--lr-tint-error); color: var(--mud-palette-error); }
.stat-tile-help summary { cursor: pointer; color: var(--mud-palette-primary); font-size: 0.8125rem; font-weight: 500; min-height: 24px; }
.stat-tile-help summary:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-tile-help p { margin: 6px 0 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--mud-palette-text-primary); }

/* Übersicht als vier Karten mit Leitzahl (StatGroupPanel, Entwurf „Statistik-Übersicht“ D); Balken in den Reihenfarben
   für Angebot und Nachfrage (ADR 0090). */
/* Jede Karte belegt vier Zeilen des Rasters (Kopf, Leitzahl, übrige Kennzahlen, Fuß) und übernimmt sie als Subgrid: So
   stehen Trennlinien und Kennzahlen nebeneinanderliegender Karten auf einer Höhe, auch wenn eine Leitzahl höher ist. */
.stat-panels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.stat-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
              padding: 20px 24px 14px; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; }
.stat-panel-head { display: flex; flex-direction: column; gap: 2px; }
.stat-panel-head .stat-card-period { margin: 0; }
.stat-panel-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 16px; align-self: end; }
.stat-panel-foot .stat-tile-help { flex: 1 1 16rem; min-height: 26px; }
.stat-panel-foot .mud-link { line-height: 26px; }
.stat-panel-title { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
                    color: var(--mud-palette-text-secondary); }
.stat-panel-lead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.stat-panel-lead-text { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-panel-lead-label { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-panel-lead-value { font-size: 2.5rem; font-weight: 700; line-height: 1.05; color: var(--mud-palette-text-primary);
                         font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Feste Mindesthöhen, damit Platzhalter und Werte gleich hoch sind und nichts springt, wenn die Zahlen kommen: Plakette
   (24px), Zusatzzeilen zweizeilig. */
.stat-panel-lead-delta { min-height: 24px; display: flex; align-items: center; }
.stat-panel-lead .stat-tile-sub { min-height: 2.9em; }
.stat-spark { flex: 0 1 12rem; min-width: 9rem; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stat-spark svg { width: 100%; height: 52px; display: block; overflow: visible; }
.stat-spark-area { fill: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.stat-spark-line { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.stat-spark-caption { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.stat-panel-pair { align-self: start; display: flex; flex-direction: column; gap: 10px; }
.stat-panel-pair .stat-tile-sub { margin: 0; }
.stat-panel-pair-row { display: grid; grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr) auto 4.5rem; align-items: center; gap: 10px; }
.stat-panel-pair-label { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-panel-pair-value { font-size: 1.25rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stat-panel-pair-row .stat-delta { justify-self: end; }
.stat-panel-bar { height: 16px; border-radius: 4px; background: var(--mud-palette-lines-default); overflow: hidden; }
.stat-panel-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 400ms ease-out; }
.stat-panel-bar-fill.s0 { background: var(--lr-series-supply); }
.stat-panel-bar-fill.s1 { background: var(--lr-series-demand); }
.stat-panel-others { align-self: start; display: grid; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--mud-palette-lines-default);
                     grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.stat-panel-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-panel-item-label { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.stat-panel-item .stat-tile-sub { min-height: 2.9em; }
.stat-panel-item-value { min-height: 1.75rem; line-height: 1.75rem; font-size: 1.25rem; font-weight: 600; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums;
                         display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.stat-panel-item-text { min-height: 1.75rem; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--mud-palette-text-primary); }
.stat-panel-help { margin: 6px 0 2px; display: grid; gap: 2px 0; font-size: 0.8125rem; line-height: 1.5; }
.stat-panel-help dt { font-weight: 600; margin-top: 6px; }
.stat-panel-help dd { margin: 0; }
@media (max-width: 520px) { .stat-panel-pair-row { grid-template-columns: minmax(0, 1fr) auto auto; }
                            .stat-panel-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .stat-panel-bar-fill { transition: none; } }

/* „Was ist gut?“ (PPAPP-190, Variante A „antippbare Werte“): Vergleichswerte als Knöpfe im Stil der Portal-Chips; der
   erreichte ist gefüllt (Weiß auf Primary). Herkunft und Einordnung stehen als Text. */
.stat-orient { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat-orient-source { margin: 0; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
.stat-orient-provisional { font-style: italic; }
.stat-orient-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-orient-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    font: inherit; font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.stat-orient-chip:hover { border-color: var(--mud-palette-primary); }
.stat-orient-chip[aria-pressed="true"] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.stat-orient-chip:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-orient-value { font-weight: 700; }
.stat-orient-verdict { margin: 0; font-size: 0.875rem; color: var(--mud-palette-text-primary); }

/* Ziele (PPAPP-191, Entwurf „Ziele“): Zielkarte der Übersicht, Reiter mit kompakten Karten als Knöpfe und Verlauf. Status
   immer mit Icon und Text in der Signalfarbe auf ihrer Tönung; Balken tragen ihren Wert als Text (AdminTheme.UiPairs). */
.stat-goals { display: grid; gap: 18px; }
.stat-goal-icon.on-track { color: var(--mud-palette-success); }
.stat-goal-icon.tight { color: var(--mud-palette-warning); }
.stat-goal-icon.at-risk { color: var(--mud-palette-error); }
.stat-goal-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
                   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.stat-goal-cards > li { display: flex; min-width: 0; }
/* align-items/justify-content gegen MudBlazors Knopf-Grundstil, der Inhalte zentriert. */
.stat-goal-card {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; width: 100%;
    padding: 16px 18px; text-align: left; cursor: pointer;
    font: inherit; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
}
.stat-goal-card:hover { border-color: var(--mud-palette-lines-inputs); }
.stat-goal-card[aria-pressed="true"] { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.stat-goal-card:focus-visible, .stat-goal-add:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-goal-card-top, .stat-goal-ov-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.stat-goal-name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-goal-period, .stat-goal-empty, .stat-goal-forecast { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.stat-goal-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.stat-goal-current { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-goal-target { font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
.stat-goal-remaining { margin: 0; font-size: 0.9375rem; color: var(--mud-palette-text-primary); }
/* Letzte Kachel: gestrichelter Rahmen in Eingabe-Rahmenfarbe (3,3:1 auf Weiß), Text in Primary. */
.stat-goal-add {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 120px; padding: 16px;
    border: 2px dashed var(--mud-palette-lines-inputs); border-radius: 12px; color: var(--mud-palette-primary);
    font-weight: 600; text-decoration: none; text-align: center;
}
.stat-goal-add:hover { background: var(--mud-palette-background); }
.stat-goal-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px;
                    border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; }
.stat-goal-status .mud-icon-root { font-size: 1.125rem; color: inherit; }
.stat-goal-status.on-track { background: var(--lr-tint-success); color: var(--mud-palette-success); }
.stat-goal-status.tight { background: var(--lr-tint-warning); color: var(--mud-palette-warning); }
.stat-goal-status.at-risk { background: var(--lr-tint-error); color: var(--mud-palette-error); }
.stat-goal-portals { margin: 6px 0 0; padding-left: 20px; }
/* Balken mit Soll-Strich: Der Strich ragt über die Spur hinaus und trägt einen weißen Saum, damit er auch auf der
   gefüllten Strecke sichtbar bleibt. */
.stat-goal-bar { display: block; padding: 4px 0; }
.stat-goal-bar-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--mud-palette-lines-default); }
.stat-goal-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--lr-series-result); }
.stat-goal-bar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px;
                      background: var(--mud-palette-text-primary); box-shadow: 0 0 0 1px var(--mud-palette-surface); }
@media (forced-colors: active) {
    .stat-goal-bar-track { border: 1px solid CanvasText; }
    .stat-goal-bar-fill { forced-color-adjust: none; background: Highlight; }
    .stat-goal-bar-mark { forced-color-adjust: none; background: CanvasText; }
}
/* Zielkarte der Übersicht neben „Entwicklung der letzten 12 Monate“. */
.stat-goal-ov-alone { max-width: 40rem; }
.stat-goal-ov-counts { margin: 0; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.stat-goal-ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stat-goal-ov-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-goal-ov-line { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.stat-goal-ov-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.stat-goal-ov-without { margin: 0; font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.stat-goal-ov-portal { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.stat-goal-ov-portal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-ph-round { border-radius: 50%; }
.stat-goal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem;
                    color: var(--mud-palette-text-secondary); }
.stat-goal-legend li { display: flex; align-items: center; gap: 5px; }
.stat-goal-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
/* Zielring: ein Abschnitt je Ziel in der Statusfarbe (je ≥ 3:1 auf Weiß, AdminTheme.UiPairs), „leicht dahinter“ heller
   als „deutlich dahinter“, damit sich die beiden auch in der Helligkeit unterscheiden; ohne Zahlen in Eingabe-Rahmenfarbe. */
.stat-goal-legend-dot.on-track, .stat-goal-donut-part.on-track { background: var(--mud-palette-success); stroke: var(--mud-palette-success); }
.stat-goal-legend-dot.tight, .stat-goal-donut-part.tight { background: var(--lr-goal-tight); stroke: var(--lr-goal-tight); }
.stat-goal-legend-dot.at-risk, .stat-goal-donut-part.at-risk { background: var(--mud-palette-error); stroke: var(--mud-palette-error); }
.stat-goal-donut-part { fill: none; stroke-width: 5; }
.stat-goal-donut-part.none { stroke: var(--mud-palette-lines-inputs); }
.stat-goal-donut-ratio { font-size: 10px; font-weight: 700; fill: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.stat-goal-donut, .stat-goal-donut-empty { position: relative; display: block; width: 48px; height: 48px; }
.stat-goal-donut-ring { display: block; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.stat-goal-donut-ring:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-goal-donut-ring svg { display: block; }
/* Aufschlüsselung: offen bei Hover, Fokus oder Antippen; Escape schließt bis zum Verlassen. Sie hängt am Ring, damit
   der Mauszeiger vom Ring hineinwandern kann, ohne dass sie zugeht. */
.stat-goal-donut-pop {
    display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: -4px; width: max-content; max-width: min(22rem, 80vw);
    padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface);
    box-shadow: 0 6px 20px rgba(20, 32, 46, 0.14); font-size: 0.8125rem; color: var(--mud-palette-text-primary);
}
.stat-goal-donut-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.stat-goal-donut:hover .stat-goal-donut-pop, .stat-goal-donut:focus-within .stat-goal-donut-pop,
.stat-goal-donut.open .stat-goal-donut-pop { display: block; }
.stat-goal-donut.dismissed .stat-goal-donut-pop { display: none; }
.stat-goal-donut-pop-title { display: block; margin-bottom: 6px; font-weight: 600; }
.stat-goal-donut-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stat-goal-donut-pop li { display: flex; align-items: flex-start; gap: 6px; }
.stat-goal-donut-pop .stat-goal-icon { font-size: 1rem; margin-top: 1px; }
.stat-goal-donut-none { flex: none; width: 12px; height: 12px; margin: 3px 2px 0; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 50%; }
@media (forced-colors: active) {
    .stat-goal-donut-part { stroke: CanvasText; }
    .stat-goal-donut-pop { border-color: CanvasText; }
}
.stat-goal-ov-suggest { background: var(--mud-palette-background); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.stat-goal-ov-suggest-title { margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-goal-ov-suggest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stat-goal-ov-suggest li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 0.875rem; }
.stat-goal-ov-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ziele festlegen (PPAPP-189): Leiste mit dem Portal wie in der Statistik, links die eigenen Ziele als ruhige Liste, rechts
   der Katalog in einer Karte; unter 60rem untereinander. Status mit Symbol und Wort, Signalfarbe auf ihrer Tönung. */
.stat-goal-portal-bar { margin: 0 0 20px; }
/* Portal im Aufklapper (StatPortalChoice): Liste von Knöpfen, das gewählte mit Haken und kräftig. */
.stat-portal-choice { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.stat-portal-choice button {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px;
    border: 0; border-radius: 6px; background: none; color: var(--mud-palette-text-primary); font: inherit; font-size: 0.875rem;
    text-align: left; cursor: pointer;
}
.stat-portal-choice button:hover { background: var(--mud-palette-background); }
.stat-portal-choice button[aria-current="true"] { font-weight: 600; color: var(--mud-palette-primary); }
.stat-portal-choice button:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: -3px; }
.stat-goal-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .stat-goal-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.stat-goal-own, .stat-goal-catalog { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stat-goal-own .stat-group-head, .stat-goal-catalog .stat-group-head { margin-bottom: 0; }
.stat-goal-pick { max-width: 32rem; }
.stat-goal-list { list-style: none; margin: 0; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.stat-goal-item { padding: 12px 0; }
.stat-goal-item + .stat-goal-item { border-top: 1px solid var(--mud-palette-lines-default); }
.stat-goal-catalog-card { gap: 20px; }
.stat-goal-category { display: flex; flex-direction: column; gap: 4px; }
.stat-goal-catalog-list { list-style: none; margin: 0; padding: 0; }
.stat-goal-catalog-list > li { padding: 10px 0; }
.stat-goal-catalog-list > li + li { border-top: 1px solid var(--mud-palette-lines-default); }
.stat-goal-category-title { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
                            color: var(--mud-palette-text-secondary); }
.stat-goal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.stat-goal-row-text { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-goal-row-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.stat-goal-row-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.stat-goal-reason { font-size: 0.8125rem; font-weight: 500; color: var(--mud-palette-text-primary); }
.stat-goal-limit { margin: 0; display: flex; gap: 6px; align-items: flex-start; padding: 8px 12px; border-radius: 8px;
                   background: var(--lr-tint-warning); color: var(--mud-palette-warning); font-size: 0.875rem; font-weight: 500; }
/* Vorschläge kompakt wie auf der Übersicht: ein Kasten, die Werte als Liste, ein Knopf. */
.stat-goal-suggestions { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: 12px;
                         border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); }
.stat-goal-suggestions-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-goal-suggestion-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.875rem;
                             font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.stat-goal-suggestion-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
/* Editor: Zeitraum, Zielwert, Orientierung, Vorschau, Aktionen untereinander. */
.stat-goal-editor { display: flex; flex-direction: column; gap: 16px; }
.stat-goal-editor-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-goal-editor-title:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-goal-step { display: flex; flex-direction: column; gap: 6px; }
.stat-goal-step-label { font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.stat-goal-period-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
@media (max-width: 599.98px) {
    .stat-goal-periods { flex-wrap: wrap; gap: 6px; }
    .stat-goal-periods button { border-left-width: 1px; border-radius: 8px; }
}
.stat-goal-number { max-width: 16rem; }
.stat-goal-number input { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Nativer Schieberegler: Tastatur (Pfeile, Pos1/Ende) und Wertansage über aria-valuetext ohne eigenes Skript. */
.stat-goal-range { width: 100%; max-width: 32rem; min-height: 24px; margin: 0; accent-color: var(--mud-palette-primary); }
.stat-goal-range:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; }
.stat-goal-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; border-radius: 8px;
                     border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); }
.stat-goal-preview-line { margin: 0; font-size: 0.9375rem; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.stat-goal-preview-line strong { font-weight: 700; }
.stat-goal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stat-goal-remove { margin-left: auto; }