.unitbar-wrapper {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding-top: 2rem; /* Platz für Tooltips in Vollansicht */
    box-sizing: border-box;
}

.unitbar-wrapper.minimal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.unitbar-wrapper.unitbar-highlighted {
    border: 1px solid #ffd700;
    border-radius: 7px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    background-color:#fff4ba;
}

.unitbar-bar {
    position: relative;
    width: 100%;
    height: 36px;
    border-radius: 5px;
    background: transparent;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.unitbar-wrapper.minimal .unitbar-bar {
    height: 20px;
}

/* Hintergrund-Gradient (ganz unten) */
.unitbar-bg {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        #711111 0%,
        #b54517 18%,
        #c88b13 36%,
        #b8c71a 54%,
        #3ba63b 78%,
        #09551a 100%
    );
    z-index: 0;
}

/* Entsättigungsmaske */
.unitbar-desat {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        rgba(230, 230, 230, 0.9),
        rgba(210, 210, 210, 0.9)
    );
    mix-blend-mode: saturation;
    transition: width 1.5s ease-out;
    z-index: 1;
}

.unitbar-bonus,
.unitbar-penalty {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 2;
}

.unitbar-bonus {
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, 0.9),
        rgba(255, 255, 255, 0.95)
    );
    mix-blend-mode: screen;
    transition: width 2s ease-out;
}

.unitbar-penalty {
    background: linear-gradient(
        90deg,
        rgba(70, 0, 0, 0.95),
        rgba(0, 0, 0, 0.95)
    );
    mix-blend-mode: multiply;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 2s ease-out;
}

/* Ticks + Notenlabels (über Segmenten, unter Cursorn) */
.unitbar-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.unitbar-tick {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
    mix-blend-mode: soft-light;
}

.unitbar-grade-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    font-size: 1rem;
}

.unitbar-grade-label {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    font-weight: 500;
}

/* Cursor-Linien über Ticks/Labels */
.unitbar-cursor-main,
.unitbar-cursor-bonus {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 4px;
    border-radius: 2px;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 4;
}

.unitbar-cursor-main {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    transition: left 1.5s ease-out;
}

.unitbar-cursor-bonus {
    background: rgba(255, 248, 200, 0.95);
    box-shadow: 0 0 8px rgba(255, 250, 210, 1);
    transition: left 2s ease-out;
}

.unitbar-cursor-bonus.penalty {
    background: #460000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* Partikel-Layer (normaler Modus) – über Cursorn, unter Tooltips/Infotext */
.unitbar-particle-layer {
    position: absolute;
    inset: -10px 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

/* eigener Layer für Info-Mode-Funken, noch über normalen Partikeln */
.unitbar-particle-layer-info {
    position: absolute;
    inset: -10px 0;
    pointer-events: none;
    overflow: visible;
    z-index: 6;
}

.unitbar-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 230, 150, 0.95);
    box-shadow: 0 0 6px rgba(255, 255, 200, 1);
    opacity: 0;
    animation: unitbarSparkFloat 700ms ease-out forwards;
}

.unitbar-particle.penalty {
    background: rgba(120, 0, 0, 0.95);
    box-shadow: 0 0 6px rgba(0, 0, 0, 1);
}

@keyframes unitbarSparkFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.5);
    }
}

/* Tooltips über normalen Partikeln (aber im Info-Mode per JS ausgeblendet) */
.unitbar-tooltip {
    position: absolute;
    top: 0;
    transform: translate(-50%, -40%);
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 6;
}

.unitbar-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -130%);
}

.unitbar-wrapper.minimal .unitbar-tooltip {
    display: none;
}

/* Summary-Kacheln unter der Leiste / rechts im Minimalmodus */
.unitbar-summary-container {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.unitbar-wrapper.minimal .unitbar-summary-container {
    margin-top: 0;
    justify-content: flex-end;
}

.unitbar-summary-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.unitbar-summary-box {
    min-width: 20%;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    background: #444;
    box-sizing: border-box;
    padding: 0px 10px;
}

.unitbar-wrapper.minimal .unitbar-summary-box {
    flex: 0 0 150px;
    min-width: 150px;
    height: 20px;
    font-size: 14px;
}

.unitbar-wrapper.unitbar-highlighted .unitbar-summary-box {
    border: 2px solid rgba(255, 215, 0, 0.9);
}

/* Extra-Boxen für Klassenwerte (links/rechts) */
.unitbar-summary-box.extra {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.unitbar-summary-box.extra-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.unitbar-summary-box.unitbar-summary-classratio.extra.extra-visible {
    opacity: 0.6;
}

.unitbar-summary-box.unitbar-summary-classmark.extra.extra-visible {
    opacity: 0.6;
}

/* Info-Text im Demo-Modus – ganz oben */
.unitbar-info-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 7;
}

.unitbar-info-text-inner {
    display: inline-flex;
    height: 90%;                 /* nimmt ca. 90% der Bar-Höhe ein */
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;           /* deutlich größer als Standard */
    text-align: center;
    line-height: 1.0;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}