/*
* Diese Datei wurde mit hilfe von GEMINI PRO erstellt, 
* da meinen eigegen CSS Skills nicht gereicht haben mein Konzept
* schon in HTML und CSS umzusetzen. 
* Weil mir aber einer wirklich darstellung der Daten wichtig war 
* habe ich mich deshalt trotzdem gegen Figma entschieden habe.
*/

.vitality-section {
    background-color: var(--color-trunk); /* Definiert in Root als #8D6E63 */
    padding: 6rem 2rem 10rem 2rem;
    position: relative;
    color: white;
}

.bar-chart-stage {
    background: rgba(0, 0, 0, 0.2); /* Dunkler Hintergrund für Kontrast */
    border-radius: 20px;
    padding: 2rem;
    margin-top: 3rem;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
    position: relative;
}

.chart-wrapper-wide {
    width: 100%;
    height: 500px;
}

/* Die Legende */
.chart-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    font-family: var(--font-heading);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    border-radius: 20px;
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.healthy { background: #80b918; }
.weak { background: #E09F3E; }
.sick { background: #BC4749; }

/* Custom Tooltip (Schwebt über dem Balken) */
.custom-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text);
    padding: 1rem;
    border-radius: 10px;
    pointer-events: none; /* Maus ignoriert ihn */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    min-width: 150px;
    transition: opacity 0.2s, top 0.2s, left 0.2s;
    z-index: 10;
}

.custom-tooltip.hidden { opacity: 0; }

.custom-tooltip h4 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-heading);
    color: var(--color-forest);
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 3px;
}

/* Achsen Styling */
.axis text { fill: rgba(255,255,255,0.7); font-size: 12px; }
.axis line { stroke: rgba(255,255,255,0.1); }
.axis path { display: none; } /* Achsenlinie ausblenden */