body { 
    font-family: 'Inter', sans-serif; 
}

/* Farben aus dem Beispielbild */
.segment-ag-rente { background-color: #d1d1d1; }
.segment-ag-alo { background-color: #b0b0b0; }
.segment-ag-kranken { background-color: #8f8f8f; }
.segment-ag-pflege { background-color: #3d3d3d; }
.segment-an-rente { background-color: #e89595; }
.segment-an-alo { background-color: #e06b6b; }
.segment-an-kranken { background-color: #d94242; }
.segment-an-pflege { background-color: #a13131; }
.segment-kirchensteuer { background-color: #70275a; }
.segment-soli { background-color: #8a2c49; }
.segment-lohnsteuer { background-color: #5b216c; }
.segment-konsum-rundfunk { background-color: #8ac1e2; }
.segment-konsum-miete { background-color: #64a8d1; }
.segment-konsum-lebensmittel { background-color: #5bbdb7; }
.segment-konsum-kleidung { background-color: #3ca9a3; }
.segment-konsum-kfz { background-color: #2c8b86; }
.segment-konsum-benzin { background-color: #1d736e; }
.segment-konsum-tabak { background-color: #13615c; }
.segment-konsum-sonstige { background-color: #0d504c; }
.segment-netto-rest { background-color: #55a80c; }

/* Styling für die Grafik und Tooltips */
.balken-segment { 
    transition: height 0.3s ease-in-out; 
    position: relative; 
}
.tooltip { 
    visibility: hidden; 
    width: 220px; 
    background-color: #333; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px; 
    position: absolute; 
    z-index: 10; 
    bottom: 105%; 
    left: 50%; 
    margin-left: -110px; 
    opacity: 0; 
    transition: opacity 0.3s; 
    pointer-events: none; 
}
.balken-segment:hover .tooltip { 
    visibility: visible; 
    opacity: 1; 
}
.label-line { 
    position: absolute; 
    left: 0; 
    width: 10px; 
    height: 1px; 
    background-color: #666; 
}
.label-text { 
    position: absolute; 
    left: 15px; 
    white-space: nowrap; 
    transform: translateY(-50%); 
    text-align: left; 
}

/* Styling für die Hilfe-Seitenleiste */
#help-panel {
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}
#help-panel.is-open {
    transform: translateX(0);
}
#help-toggle svg {
    transition: transform 0.4s ease-in-out;
}
#help-toggle.is-open svg {
    transform: rotate(180deg);
}