.img-compar-container {
              position: relative;
              width: 100%;
              max-width: 900px; 
              height: auto;
              margin: 0 auto; /* Zentriert das Element zusätzlich auf CSS-Ebene */
              overflow: hidden;
              user-select: none;
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
              border-radius: 6px;
            }

            /* Beide Container liegen exakt übereinander */
            .img-compar-after, 
            .img-compar-before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }

            .img-compar-after {
              z-index: 1;
            }

            /* Das Vorher-Bild wird per Clip-Path sauber freigelegt */
            .img-compar-before {
              z-index: 2;
              clip-path: inset(0 50% 0 0);
            }

            /* Das erste Bild bestimmt die natürliche Höhe, damit oben nichts mehr abgeschnitten wird! */
            .img-compar-container img {
              display: block;
              width: 100%;
              height: auto; 
              object-fit: contain;
              pointer-events: none;
            }

            /* Das zweite Bild passt sich exakt an */
            .img-compar-before img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            /* --- TEXT-LABELS STYLING --- */
            .img-label {
              position: absolute;
              bottom: 20px;
              background-color: rgba(0, 0, 0, 0.75);
              color: #ffffff;
              padding: 6px 14px;
              font-family: sans-serif;
              font-size: 13px;
              font-weight: 500;
              border-radius: 4px;
              opacity: 0;
              transition: opacity 0.3s ease;
              pointer-events: none;
            }

            .label-before { left: 20px; z-index: 4; }
            .label-after { right: 20px; z-index: 3; }

            .img-compar-container:hover .img-label { opacity: 1; }
            .img-compar-container.is-sliding .img-label { opacity: 0 !important; }

            /* Der unsichtbare Schieberegler über dem gesamten Bild */
            .img-compar-slider {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: transparent;
              opacity: 0; 
              z-index: 10;
              cursor: ew-resize;
              margin: 0;
              padding: 0;
              border: none;
            }

            /* Die sichtbare vertikale Trennlinie */
            .img-compar-line {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 50%;
              width: 3px;
              background-color: #ffffff;
              box-shadow: 0 0 10px rgba(0,0,0,0.5);
              z-index: 5;
              pointer-events: none; 
              transform: translateX(-50%);
            }

            /* Der Griff (Kreis mit Pfeilen) in der Mitte der Linie */
            .img-compar-line::after {
              content: "↔";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 44px;
              height: 44px;
              background-color: #ffffff;
              color: #333333;
              border-radius: 50%;
              text-align: center;
              line-height: 42px;
              font-weight: bold;
              font-size: 18px;
              box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            }