/* ===== Grundlayout ================================= */
.testing-result{
    max-width:600px;
    margin:0 auto 2rem;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

.testing-result h3{
    text-align:center;
    margin-bottom:1rem;
    font-size:1.4rem;
}

.testing-result h4{
    text-align:center;
    margin-bottom:1.5rem;
    font-size:1rem;
}

.testing-item{margin-bottom:1.2rem;}

.testing-label{
    display:flex;
    justify-content:space-between;
    font-size:0.9rem;
    margin-bottom:0.25rem;
}

/* Prozentzahl – startet unsichtbar, fadet ein */
.testing-val{
    opacity:0;
    transition:opacity 1.2s ease-out;
}

/* ===== Balken‑Rahmen ================================= */
.testing-bar{
    position:relative;
    height:18px;
    background:#e5e5e5;
    border-radius:9px;
    overflow:hidden;               /* clippt alles außerhalb des Rahmens */
}

/* ===== Gefüllter Balken ============================== */
.testing-bar-fill{
    position:relative;
    display:block;
    height:100%;
    width:0%;                      /* wird via JS animiert */
    border-radius:9px;
    overflow:hidden;               /* ✱ clippt das Schimmer‑Pseudo‑Element */
    transition:width 1.4s ease-out,
               background-color 1s ease-out;
}

/* ===== Schimmer nur über die gefüllte Fläche ========= */
.testing-bar-fill::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;                    /* startet links außerhalb */
    width:200%;                    /* doppelte Breite für sanften Slide */
    height:100%;
    background:linear-gradient(120deg,
                rgba(255,255,255,0)   0%,
                rgba(255,255,255,.35) 50%,
                rgba(255,255,255,0) 100%);
    animation:shimmer 2.2s infinite;
}



/* leichter Innen‑Schatten für Tiefe */
.testing-bar::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:9px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}