.ls-frame {
    --ls-bg: var(--bs-gray-300, #d5d5d5);
    --ls-orange: #f28c28;
    --ls-turquoise: #14b8a6;
    background-color: var(--ls-bg);
    padding: 1.25rem;
    border-radius: var(--bs-border-radius, .375rem);
}

.ls-frame > :first-child {
    margin-top: 0;
}

.ls-frame > :last-child {
    margin-bottom: 0;
}

.ls-slider {
    position: relative;
    max-width: 100%;
    margin-block: 1rem;
}

.ls-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--bs-border-radius, .375rem);
    background-color: #eee;
    isolation: isolate;
}

.ls-layer {
    position: absolute;
    inset: 0;
}

.ls-layer--base {
    z-index: 1;
}

.ls-layer--overlay {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ls-layer--overlay {
        transition: opacity .25s ease;
    }
}

.ls-layer--overlay.is-active {
    opacity: 1;
    /*
     * Erst die aktive Ebene bekommt Maus-Interaktion zurueck. Dadurch
     * "faengt" beim Hovern immer das gerade sichtbare Bild den Mauszeiger
     * ab (statt dass er durch die unsichtbare/transparente Overlay-Ebene
     * hindurch auf das darunterliegende Basisbild trifft) - der native
     * Browser-Tooltip zeigt so automatisch den Titel des jeweils aktiven
     * Bildes, nicht immer den des Basisbildes.
     */
    pointer-events: auto;
}

.ls-layer__offset-x,
.ls-layer__offset-y {
    position: absolute;
    inset: 0;
}

.ls-layer__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Pixelgenaue Ausrichtungskorrektur je Ebene (Bild 1-8 sind eigenstaendig
 * generiert und daher nicht immer deckungsgleich). Absichtlich KEIN
 * element.style.transform per JS/Fluid, sondern zwei verschachtelte
 * Wrapper-Ebenen (je eine pro Achse) mit einem data-Attribut, das auf eine
 * von 61 vorgenerierten CSS-Regeln (-30px bis +30px) trifft - kombinierbar,
 * da X- und Y-Transform auf unterschiedlichen (verschachtelten) Elementen
 * liegen. Grund wie beim Vergleichsregler: eine CSP ohne "unsafe-inline"
 * fuer style-src blockiert jedes Inline-style-Attribut, egal ob von JS oder
 * serverseitig per Fluid gesetzt.
 */
.ls-layer__offset-x[data-offset-x="-30"] { transform: translateX(-30px); }
.ls-layer__offset-x[data-offset-x="-29"] { transform: translateX(-29px); }
.ls-layer__offset-x[data-offset-x="-28"] { transform: translateX(-28px); }
.ls-layer__offset-x[data-offset-x="-27"] { transform: translateX(-27px); }
.ls-layer__offset-x[data-offset-x="-26"] { transform: translateX(-26px); }
.ls-layer__offset-x[data-offset-x="-25"] { transform: translateX(-25px); }
.ls-layer__offset-x[data-offset-x="-24"] { transform: translateX(-24px); }
.ls-layer__offset-x[data-offset-x="-23"] { transform: translateX(-23px); }
.ls-layer__offset-x[data-offset-x="-22"] { transform: translateX(-22px); }
.ls-layer__offset-x[data-offset-x="-21"] { transform: translateX(-21px); }
.ls-layer__offset-x[data-offset-x="-20"] { transform: translateX(-20px); }
.ls-layer__offset-x[data-offset-x="-19"] { transform: translateX(-19px); }
.ls-layer__offset-x[data-offset-x="-18"] { transform: translateX(-18px); }
.ls-layer__offset-x[data-offset-x="-17"] { transform: translateX(-17px); }
.ls-layer__offset-x[data-offset-x="-16"] { transform: translateX(-16px); }
.ls-layer__offset-x[data-offset-x="-15"] { transform: translateX(-15px); }
.ls-layer__offset-x[data-offset-x="-14"] { transform: translateX(-14px); }
.ls-layer__offset-x[data-offset-x="-13"] { transform: translateX(-13px); }
.ls-layer__offset-x[data-offset-x="-12"] { transform: translateX(-12px); }
.ls-layer__offset-x[data-offset-x="-11"] { transform: translateX(-11px); }
.ls-layer__offset-x[data-offset-x="-10"] { transform: translateX(-10px); }
.ls-layer__offset-x[data-offset-x="-9"] { transform: translateX(-9px); }
.ls-layer__offset-x[data-offset-x="-8"] { transform: translateX(-8px); }
.ls-layer__offset-x[data-offset-x="-7"] { transform: translateX(-7px); }
.ls-layer__offset-x[data-offset-x="-6"] { transform: translateX(-6px); }
.ls-layer__offset-x[data-offset-x="-5"] { transform: translateX(-5px); }
.ls-layer__offset-x[data-offset-x="-4"] { transform: translateX(-4px); }
.ls-layer__offset-x[data-offset-x="-3"] { transform: translateX(-3px); }
.ls-layer__offset-x[data-offset-x="-2"] { transform: translateX(-2px); }
.ls-layer__offset-x[data-offset-x="-1"] { transform: translateX(-1px); }
.ls-layer__offset-x[data-offset-x="0"] { transform: translateX(0); }
.ls-layer__offset-x[data-offset-x="1"] { transform: translateX(1px); }
.ls-layer__offset-x[data-offset-x="2"] { transform: translateX(2px); }
.ls-layer__offset-x[data-offset-x="3"] { transform: translateX(3px); }
.ls-layer__offset-x[data-offset-x="4"] { transform: translateX(4px); }
.ls-layer__offset-x[data-offset-x="5"] { transform: translateX(5px); }
.ls-layer__offset-x[data-offset-x="6"] { transform: translateX(6px); }
.ls-layer__offset-x[data-offset-x="7"] { transform: translateX(7px); }
.ls-layer__offset-x[data-offset-x="8"] { transform: translateX(8px); }
.ls-layer__offset-x[data-offset-x="9"] { transform: translateX(9px); }
.ls-layer__offset-x[data-offset-x="10"] { transform: translateX(10px); }
.ls-layer__offset-x[data-offset-x="11"] { transform: translateX(11px); }
.ls-layer__offset-x[data-offset-x="12"] { transform: translateX(12px); }
.ls-layer__offset-x[data-offset-x="13"] { transform: translateX(13px); }
.ls-layer__offset-x[data-offset-x="14"] { transform: translateX(14px); }
.ls-layer__offset-x[data-offset-x="15"] { transform: translateX(15px); }
.ls-layer__offset-x[data-offset-x="16"] { transform: translateX(16px); }
.ls-layer__offset-x[data-offset-x="17"] { transform: translateX(17px); }
.ls-layer__offset-x[data-offset-x="18"] { transform: translateX(18px); }
.ls-layer__offset-x[data-offset-x="19"] { transform: translateX(19px); }
.ls-layer__offset-x[data-offset-x="20"] { transform: translateX(20px); }
.ls-layer__offset-x[data-offset-x="21"] { transform: translateX(21px); }
.ls-layer__offset-x[data-offset-x="22"] { transform: translateX(22px); }
.ls-layer__offset-x[data-offset-x="23"] { transform: translateX(23px); }
.ls-layer__offset-x[data-offset-x="24"] { transform: translateX(24px); }
.ls-layer__offset-x[data-offset-x="25"] { transform: translateX(25px); }
.ls-layer__offset-x[data-offset-x="26"] { transform: translateX(26px); }
.ls-layer__offset-x[data-offset-x="27"] { transform: translateX(27px); }
.ls-layer__offset-x[data-offset-x="28"] { transform: translateX(28px); }
.ls-layer__offset-x[data-offset-x="29"] { transform: translateX(29px); }
.ls-layer__offset-x[data-offset-x="30"] { transform: translateX(30px); }

.ls-layer__offset-y[data-offset-y="-30"] { transform: translateY(-30px); }
.ls-layer__offset-y[data-offset-y="-29"] { transform: translateY(-29px); }
.ls-layer__offset-y[data-offset-y="-28"] { transform: translateY(-28px); }
.ls-layer__offset-y[data-offset-y="-27"] { transform: translateY(-27px); }
.ls-layer__offset-y[data-offset-y="-26"] { transform: translateY(-26px); }
.ls-layer__offset-y[data-offset-y="-25"] { transform: translateY(-25px); }
.ls-layer__offset-y[data-offset-y="-24"] { transform: translateY(-24px); }
.ls-layer__offset-y[data-offset-y="-23"] { transform: translateY(-23px); }
.ls-layer__offset-y[data-offset-y="-22"] { transform: translateY(-22px); }
.ls-layer__offset-y[data-offset-y="-21"] { transform: translateY(-21px); }
.ls-layer__offset-y[data-offset-y="-20"] { transform: translateY(-20px); }
.ls-layer__offset-y[data-offset-y="-19"] { transform: translateY(-19px); }
.ls-layer__offset-y[data-offset-y="-18"] { transform: translateY(-18px); }
.ls-layer__offset-y[data-offset-y="-17"] { transform: translateY(-17px); }
.ls-layer__offset-y[data-offset-y="-16"] { transform: translateY(-16px); }
.ls-layer__offset-y[data-offset-y="-15"] { transform: translateY(-15px); }
.ls-layer__offset-y[data-offset-y="-14"] { transform: translateY(-14px); }
.ls-layer__offset-y[data-offset-y="-13"] { transform: translateY(-13px); }
.ls-layer__offset-y[data-offset-y="-12"] { transform: translateY(-12px); }
.ls-layer__offset-y[data-offset-y="-11"] { transform: translateY(-11px); }
.ls-layer__offset-y[data-offset-y="-10"] { transform: translateY(-10px); }
.ls-layer__offset-y[data-offset-y="-9"] { transform: translateY(-9px); }
.ls-layer__offset-y[data-offset-y="-8"] { transform: translateY(-8px); }
.ls-layer__offset-y[data-offset-y="-7"] { transform: translateY(-7px); }
.ls-layer__offset-y[data-offset-y="-6"] { transform: translateY(-6px); }
.ls-layer__offset-y[data-offset-y="-5"] { transform: translateY(-5px); }
.ls-layer__offset-y[data-offset-y="-4"] { transform: translateY(-4px); }
.ls-layer__offset-y[data-offset-y="-3"] { transform: translateY(-3px); }
.ls-layer__offset-y[data-offset-y="-2"] { transform: translateY(-2px); }
.ls-layer__offset-y[data-offset-y="-1"] { transform: translateY(-1px); }
.ls-layer__offset-y[data-offset-y="0"] { transform: translateY(0); }
.ls-layer__offset-y[data-offset-y="1"] { transform: translateY(1px); }
.ls-layer__offset-y[data-offset-y="2"] { transform: translateY(2px); }
.ls-layer__offset-y[data-offset-y="3"] { transform: translateY(3px); }
.ls-layer__offset-y[data-offset-y="4"] { transform: translateY(4px); }
.ls-layer__offset-y[data-offset-y="5"] { transform: translateY(5px); }
.ls-layer__offset-y[data-offset-y="6"] { transform: translateY(6px); }
.ls-layer__offset-y[data-offset-y="7"] { transform: translateY(7px); }
.ls-layer__offset-y[data-offset-y="8"] { transform: translateY(8px); }
.ls-layer__offset-y[data-offset-y="9"] { transform: translateY(9px); }
.ls-layer__offset-y[data-offset-y="10"] { transform: translateY(10px); }
.ls-layer__offset-y[data-offset-y="11"] { transform: translateY(11px); }
.ls-layer__offset-y[data-offset-y="12"] { transform: translateY(12px); }
.ls-layer__offset-y[data-offset-y="13"] { transform: translateY(13px); }
.ls-layer__offset-y[data-offset-y="14"] { transform: translateY(14px); }
.ls-layer__offset-y[data-offset-y="15"] { transform: translateY(15px); }
.ls-layer__offset-y[data-offset-y="16"] { transform: translateY(16px); }
.ls-layer__offset-y[data-offset-y="17"] { transform: translateY(17px); }
.ls-layer__offset-y[data-offset-y="18"] { transform: translateY(18px); }
.ls-layer__offset-y[data-offset-y="19"] { transform: translateY(19px); }
.ls-layer__offset-y[data-offset-y="20"] { transform: translateY(20px); }
.ls-layer__offset-y[data-offset-y="21"] { transform: translateY(21px); }
.ls-layer__offset-y[data-offset-y="22"] { transform: translateY(22px); }
.ls-layer__offset-y[data-offset-y="23"] { transform: translateY(23px); }
.ls-layer__offset-y[data-offset-y="24"] { transform: translateY(24px); }
.ls-layer__offset-y[data-offset-y="25"] { transform: translateY(25px); }
.ls-layer__offset-y[data-offset-y="26"] { transform: translateY(26px); }
.ls-layer__offset-y[data-offset-y="27"] { transform: translateY(27px); }
.ls-layer__offset-y[data-offset-y="28"] { transform: translateY(28px); }
.ls-layer__offset-y[data-offset-y="29"] { transform: translateY(29px); }
.ls-layer__offset-y[data-offset-y="30"] { transform: translateY(30px); }

/*
 * Balken unter dem Bild: duenner oranger Rahmen, darin ein tuerkisfarbener
 * Regler-Kreis (natives <input type="range">, transparent gestylt, damit es
 * per Tastatur/Screenreader bedienbar bleibt - siehe Vergleichsregler).
 */
.ls-bar {
    position: relative;
    margin-top: 1rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
}

.ls-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 10px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--ls-orange);
}

.ls-bar__dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
}

.ls-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ls-orange);
    opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
    .ls-bar__dot {
        transition: opacity .2s ease, background-color .2s ease;
    }
}

.ls-bar__dot.is-active {
    opacity: 1;
    background: var(--ls-turquoise);
}

.ls-bar__range {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.ls-bar__range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 100%;
}

.ls-bar__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ls-turquoise);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    cursor: ew-resize;
}

.ls-bar__range::-moz-range-track {
    background: transparent;
    height: 100%;
    border: 0;
}

.ls-bar__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ls-turquoise);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    cursor: ew-resize;
}

.ls-bar__range:focus-visible {
    outline: 3px solid var(--ls-turquoise);
    outline-offset: 2px;
}

/*
 * Textboxen je Ebene: nur die zur aktuellen Reglerposition passende Box
 * bekommt "is-active" von frontend.js (reines classList.toggle, kein
 * Inline-Style - CSP-unkritisch).
 */
.ls-panels {
    margin-top: 1rem;
}

.ls-panel {
    display: none;
}

.ls-panel.is-active {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .ls-panel.is-active {
        animation: lsFadeIn .2s ease;
    }
}

@keyframes lsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ls-panel__title {
    font-weight: 700;
    margin: 0 0 .25rem;
}

.ls-panel__desc {
    margin: 0 0 .25rem;
}

.ls-panel__question {
    font-style: italic;
    margin: 0 0 .25rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ls-panel__diagnosis {
    font-size: .875rem;
    font-weight: 600;
    margin: 0;
    color: var(--ls-orange);
}