.cb-comparator-frame {
    --cb-comparator-bg: var(--bs-gray-300, #d5d5d5);
    background-color: var(--cb-comparator-bg);
    padding: 1.25rem;
    border-radius: var(--bs-border-radius, .375rem);
}

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

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

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

.cb-comparator__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius, .375rem);
    background-color: #eee;
    isolation: isolate;
}

.cb-comparator__base {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.cb-comparator__layer {
    position: absolute;
    inset: 0;
    /* Default vor Initialisierung durch frontend.js; siehe data-reveal-Regeln weiter unten. */
    clip-path: inset(0 50% 0 0);
    border-right: 2px solid #fff;
    box-shadow: 1px 0 6px rgba(0, 0, 0, .35);
}

/*
 * Die Reglerposition wird nicht per inline style (element.style.setProperty)
 * gesetzt, weil das unter einer aktiven Content-Security-Policy ohne
 * "unsafe-inline" fuer style-src vom Browser blockiert wird. Stattdessen
 * setzt frontend.js nur das Attribut data-reveal (kein Style!), und diese
 * 101 Regeln (0-100 %) uebernehmen die eigentliche Darstellung ueber ganz
 * normales, extern geladenes CSS - das ist von style-src 'self' immer erlaubt.
 */
.cb-comparator__layer[data-reveal="0"] { clip-path: inset(0 100% 0 0); }
.cb-comparator__layer[data-reveal="1"] { clip-path: inset(0 99% 0 0); }
.cb-comparator__layer[data-reveal="2"] { clip-path: inset(0 98% 0 0); }
.cb-comparator__layer[data-reveal="3"] { clip-path: inset(0 97% 0 0); }
.cb-comparator__layer[data-reveal="4"] { clip-path: inset(0 96% 0 0); }
.cb-comparator__layer[data-reveal="5"] { clip-path: inset(0 95% 0 0); }
.cb-comparator__layer[data-reveal="6"] { clip-path: inset(0 94% 0 0); }
.cb-comparator__layer[data-reveal="7"] { clip-path: inset(0 93% 0 0); }
.cb-comparator__layer[data-reveal="8"] { clip-path: inset(0 92% 0 0); }
.cb-comparator__layer[data-reveal="9"] { clip-path: inset(0 91% 0 0); }
.cb-comparator__layer[data-reveal="10"] { clip-path: inset(0 90% 0 0); }
.cb-comparator__layer[data-reveal="11"] { clip-path: inset(0 89% 0 0); }
.cb-comparator__layer[data-reveal="12"] { clip-path: inset(0 88% 0 0); }
.cb-comparator__layer[data-reveal="13"] { clip-path: inset(0 87% 0 0); }
.cb-comparator__layer[data-reveal="14"] { clip-path: inset(0 86% 0 0); }
.cb-comparator__layer[data-reveal="15"] { clip-path: inset(0 85% 0 0); }
.cb-comparator__layer[data-reveal="16"] { clip-path: inset(0 84% 0 0); }
.cb-comparator__layer[data-reveal="17"] { clip-path: inset(0 83% 0 0); }
.cb-comparator__layer[data-reveal="18"] { clip-path: inset(0 82% 0 0); }
.cb-comparator__layer[data-reveal="19"] { clip-path: inset(0 81% 0 0); }
.cb-comparator__layer[data-reveal="20"] { clip-path: inset(0 80% 0 0); }
.cb-comparator__layer[data-reveal="21"] { clip-path: inset(0 79% 0 0); }
.cb-comparator__layer[data-reveal="22"] { clip-path: inset(0 78% 0 0); }
.cb-comparator__layer[data-reveal="23"] { clip-path: inset(0 77% 0 0); }
.cb-comparator__layer[data-reveal="24"] { clip-path: inset(0 76% 0 0); }
.cb-comparator__layer[data-reveal="25"] { clip-path: inset(0 75% 0 0); }
.cb-comparator__layer[data-reveal="26"] { clip-path: inset(0 74% 0 0); }
.cb-comparator__layer[data-reveal="27"] { clip-path: inset(0 73% 0 0); }
.cb-comparator__layer[data-reveal="28"] { clip-path: inset(0 72% 0 0); }
.cb-comparator__layer[data-reveal="29"] { clip-path: inset(0 71% 0 0); }
.cb-comparator__layer[data-reveal="30"] { clip-path: inset(0 70% 0 0); }
.cb-comparator__layer[data-reveal="31"] { clip-path: inset(0 69% 0 0); }
.cb-comparator__layer[data-reveal="32"] { clip-path: inset(0 68% 0 0); }
.cb-comparator__layer[data-reveal="33"] { clip-path: inset(0 67% 0 0); }
.cb-comparator__layer[data-reveal="34"] { clip-path: inset(0 66% 0 0); }
.cb-comparator__layer[data-reveal="35"] { clip-path: inset(0 65% 0 0); }
.cb-comparator__layer[data-reveal="36"] { clip-path: inset(0 64% 0 0); }
.cb-comparator__layer[data-reveal="37"] { clip-path: inset(0 63% 0 0); }
.cb-comparator__layer[data-reveal="38"] { clip-path: inset(0 62% 0 0); }
.cb-comparator__layer[data-reveal="39"] { clip-path: inset(0 61% 0 0); }
.cb-comparator__layer[data-reveal="40"] { clip-path: inset(0 60% 0 0); }
.cb-comparator__layer[data-reveal="41"] { clip-path: inset(0 59% 0 0); }
.cb-comparator__layer[data-reveal="42"] { clip-path: inset(0 58% 0 0); }
.cb-comparator__layer[data-reveal="43"] { clip-path: inset(0 57% 0 0); }
.cb-comparator__layer[data-reveal="44"] { clip-path: inset(0 56% 0 0); }
.cb-comparator__layer[data-reveal="45"] { clip-path: inset(0 55% 0 0); }
.cb-comparator__layer[data-reveal="46"] { clip-path: inset(0 54% 0 0); }
.cb-comparator__layer[data-reveal="47"] { clip-path: inset(0 53% 0 0); }
.cb-comparator__layer[data-reveal="48"] { clip-path: inset(0 52% 0 0); }
.cb-comparator__layer[data-reveal="49"] { clip-path: inset(0 51% 0 0); }
.cb-comparator__layer[data-reveal="50"] { clip-path: inset(0 50% 0 0); }
.cb-comparator__layer[data-reveal="51"] { clip-path: inset(0 49% 0 0); }
.cb-comparator__layer[data-reveal="52"] { clip-path: inset(0 48% 0 0); }
.cb-comparator__layer[data-reveal="53"] { clip-path: inset(0 47% 0 0); }
.cb-comparator__layer[data-reveal="54"] { clip-path: inset(0 46% 0 0); }
.cb-comparator__layer[data-reveal="55"] { clip-path: inset(0 45% 0 0); }
.cb-comparator__layer[data-reveal="56"] { clip-path: inset(0 44% 0 0); }
.cb-comparator__layer[data-reveal="57"] { clip-path: inset(0 43% 0 0); }
.cb-comparator__layer[data-reveal="58"] { clip-path: inset(0 42% 0 0); }
.cb-comparator__layer[data-reveal="59"] { clip-path: inset(0 41% 0 0); }
.cb-comparator__layer[data-reveal="60"] { clip-path: inset(0 40% 0 0); }
.cb-comparator__layer[data-reveal="61"] { clip-path: inset(0 39% 0 0); }
.cb-comparator__layer[data-reveal="62"] { clip-path: inset(0 38% 0 0); }
.cb-comparator__layer[data-reveal="63"] { clip-path: inset(0 37% 0 0); }
.cb-comparator__layer[data-reveal="64"] { clip-path: inset(0 36% 0 0); }
.cb-comparator__layer[data-reveal="65"] { clip-path: inset(0 35% 0 0); }
.cb-comparator__layer[data-reveal="66"] { clip-path: inset(0 34% 0 0); }
.cb-comparator__layer[data-reveal="67"] { clip-path: inset(0 33% 0 0); }
.cb-comparator__layer[data-reveal="68"] { clip-path: inset(0 32% 0 0); }
.cb-comparator__layer[data-reveal="69"] { clip-path: inset(0 31% 0 0); }
.cb-comparator__layer[data-reveal="70"] { clip-path: inset(0 30% 0 0); }
.cb-comparator__layer[data-reveal="71"] { clip-path: inset(0 29% 0 0); }
.cb-comparator__layer[data-reveal="72"] { clip-path: inset(0 28% 0 0); }
.cb-comparator__layer[data-reveal="73"] { clip-path: inset(0 27% 0 0); }
.cb-comparator__layer[data-reveal="74"] { clip-path: inset(0 26% 0 0); }
.cb-comparator__layer[data-reveal="75"] { clip-path: inset(0 25% 0 0); }
.cb-comparator__layer[data-reveal="76"] { clip-path: inset(0 24% 0 0); }
.cb-comparator__layer[data-reveal="77"] { clip-path: inset(0 23% 0 0); }
.cb-comparator__layer[data-reveal="78"] { clip-path: inset(0 22% 0 0); }
.cb-comparator__layer[data-reveal="79"] { clip-path: inset(0 21% 0 0); }
.cb-comparator__layer[data-reveal="80"] { clip-path: inset(0 20% 0 0); }
.cb-comparator__layer[data-reveal="81"] { clip-path: inset(0 19% 0 0); }
.cb-comparator__layer[data-reveal="82"] { clip-path: inset(0 18% 0 0); }
.cb-comparator__layer[data-reveal="83"] { clip-path: inset(0 17% 0 0); }
.cb-comparator__layer[data-reveal="84"] { clip-path: inset(0 16% 0 0); }
.cb-comparator__layer[data-reveal="85"] { clip-path: inset(0 15% 0 0); }
.cb-comparator__layer[data-reveal="86"] { clip-path: inset(0 14% 0 0); }
.cb-comparator__layer[data-reveal="87"] { clip-path: inset(0 13% 0 0); }
.cb-comparator__layer[data-reveal="88"] { clip-path: inset(0 12% 0 0); }
.cb-comparator__layer[data-reveal="89"] { clip-path: inset(0 11% 0 0); }
.cb-comparator__layer[data-reveal="90"] { clip-path: inset(0 10% 0 0); }
.cb-comparator__layer[data-reveal="91"] { clip-path: inset(0 9% 0 0); }
.cb-comparator__layer[data-reveal="92"] { clip-path: inset(0 8% 0 0); }
.cb-comparator__layer[data-reveal="93"] { clip-path: inset(0 7% 0 0); }
.cb-comparator__layer[data-reveal="94"] { clip-path: inset(0 6% 0 0); }
.cb-comparator__layer[data-reveal="95"] { clip-path: inset(0 5% 0 0); }
.cb-comparator__layer[data-reveal="96"] { clip-path: inset(0 4% 0 0); }
.cb-comparator__layer[data-reveal="97"] { clip-path: inset(0 3% 0 0); }
.cb-comparator__layer[data-reveal="98"] { clip-path: inset(0 2% 0 0); }
.cb-comparator__layer[data-reveal="99"] { clip-path: inset(0 1% 0 0); }
.cb-comparator__layer[data-reveal="100"] { clip-path: inset(0 0% 0 0); }

.cb-comparator__layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-comparator__layer[data-layer="mid"] {
    z-index: 2;
}

.cb-comparator__layer[data-layer="top"] {
    z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-comparator__layer {
        transition: clip-path .05s linear;
    }
}

.cb-comparator__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.cb-comparator__range:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: -3px;
}

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

.cb-comparator__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bs-primary, #0d6efd);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    cursor: ew-resize;
    transition: border-color .2s ease;
}

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

.cb-comparator__range::-moz-range-thumb {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bs-primary, #0d6efd);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    cursor: ew-resize;
    transition: border-color .2s ease;
}

/*
 * Reglerfarbe folgt der jeweils dominanten Ansicht (data-active, von
 * frontend.js gesetzt) - dieselben Farben wie die Punkte in der
 * Bildunterschrift weiter unten (orange/dunkelgrau/tuerkis).
 */
.cb-comparator[data-active="start"] .cb-comparator__range::-webkit-slider-thumb,
.cb-comparator[data-active="start"] .cb-comparator__range::-moz-range-thumb {
    border-color: var(--bs-primary, #0d6efd);
}

.cb-comparator[data-active="middle"] .cb-comparator__range::-webkit-slider-thumb,
.cb-comparator[data-active="middle"] .cb-comparator__range::-moz-range-thumb {
    border-color: var(--bs-secondary, #6c757d);
}

.cb-comparator[data-active="end"] .cb-comparator__range::-webkit-slider-thumb,
.cb-comparator[data-active="end"] .cb-comparator__range::-moz-range-thumb {
    border-color: var(--bs-info, #0dcaf0);
}

/*
 * Alle Bildunterschriften liegen deckungsgleich uebereinander (position:
 * absolute) und werden nur per Opacity ein-/ausgeblendet - dadurch wirkt
 * der Wechsel als Ueberblendung an derselben Stelle statt als Liste, aus
 * der Eintraege verschwinden/erscheinen. min-height haelt den Platz frei,
 * damit die absolut positionierten <li> ueberhaupt eine Bezugsgroesse haben.
 */
.cb-comparator__legend {
    position: relative;
    min-height: 1.6em;
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.cb-comparator__legend li {
    position: absolute;
    inset: 0 0 auto 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-comparator__legend li {
        transition: opacity .3s ease;
    }
}

/*
 * Sichtbarkeit der Bildunterschrift folgt data-opacity (0/5/10/…/100 %),
 * synchron zur Bildueberblendung berechnet in frontend.js. Kein
 * element.style.opacity per JS - siehe Begruendung bei den
 * data-reveal-Regeln weiter oben (CSP style-src).
 */
.cb-comparator__legend li[data-opacity="0"] { opacity: 0; }
.cb-comparator__legend li[data-opacity="5"] { opacity: .05; }
.cb-comparator__legend li[data-opacity="10"] { opacity: .1; }
.cb-comparator__legend li[data-opacity="15"] { opacity: .15; }
.cb-comparator__legend li[data-opacity="20"] { opacity: .2; }
.cb-comparator__legend li[data-opacity="25"] { opacity: .25; }
.cb-comparator__legend li[data-opacity="30"] { opacity: .3; }
.cb-comparator__legend li[data-opacity="35"] { opacity: .35; }
.cb-comparator__legend li[data-opacity="40"] { opacity: .4; }
.cb-comparator__legend li[data-opacity="45"] { opacity: .45; }
.cb-comparator__legend li[data-opacity="50"] { opacity: .5; }
.cb-comparator__legend li[data-opacity="55"] { opacity: .55; }
.cb-comparator__legend li[data-opacity="60"] { opacity: .6; }
.cb-comparator__legend li[data-opacity="65"] { opacity: .65; }
.cb-comparator__legend li[data-opacity="70"] { opacity: .7; }
.cb-comparator__legend li[data-opacity="75"] { opacity: .75; }
.cb-comparator__legend li[data-opacity="80"] { opacity: .8; }
.cb-comparator__legend li[data-opacity="85"] { opacity: .85; }
.cb-comparator__legend li[data-opacity="90"] { opacity: .9; }
.cb-comparator__legend li[data-opacity="95"] { opacity: .95; }
.cb-comparator__legend li[data-opacity="100"] { opacity: 1; }

.cb-comparator__dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    flex: 0 0 auto;
}

.cb-comparator__dot--mid {
    background: var(--bs-secondary, #6c757d);
}

.cb-comparator__dot--end {
    background: var(--bs-info, #0dcaf0);
}

.cb-comparator__caption {
    margin-top: .75rem;
}