.bricks-notice-selfmade {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 1rem;
  background: var(--bricks-text-info);
}
.bricks-notice-selfmade svg path {
  fill: #fff;
}

:root {
  --effect-fami-offset: 15px;
  --effect-line-color: #fff;
}

.has-effect-fami:has(.effect-fami):hover .effect-block::before, .has-effect-fami:has(.effect-fami):hover .effect-block::after {
  width: calc(100% + var(--effect-fami-offset) * 2);
}
.has-effect-fami:has(.effect-fami):hover .effect-inline::before, .has-effect-fami:has(.effect-fami):hover .effect-inline::after {
  height: calc(100% + var(--effect-fami-offset) * 2);
}

.effect-fami .outer {
  background-color: blue;
  width: 400px;
  aspect-ratio: 1/1;
  position: relative;
}
.effect-fami .inner {
  --inset: 2rem;
  position: absolute;
  top: var(--inset);
  right: var(--inset);
  left: var(--inset);
  bottom: var(--inset);
  background: rgba(0, 0, 0, 0.4);
}
.effect-fami .effect-block {
  height: 100%;
  width: 100%;
  position: relative;
}
.effect-fami .effect-block::before, .effect-fami .effect-block::after {
  content: "";
  position: absolute;
  background-color: var(--effect-line-color);
  height: 1px;
  width: 0;
  transition: all 0.8s ease-in-out;
}
.effect-fami .effect-block::before {
  top: 0;
  left: calc(var(--effect-fami-offset) * -1);
}
.effect-fami .effect-block::after {
  bottom: 0;
  left: calc(var(--effect-fami-offset) * -1);
}
.effect-fami .effect-inline {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.effect-fami .effect-inline::before, .effect-fami .effect-inline::after {
  content: "";
  position: absolute;
  background-color: var(--effect-line-color);
  width: 1px;
  height: 0;
  transition: all 0.8s ease-in-out;
}
.effect-fami .effect-inline::before {
  top: calc(var(--effect-fami-offset) * -1);
  left: 0;
}
.effect-fami .effect-inline::after {
  top: calc(var(--effect-fami-offset) * -1);
  right: 0;
}

[class*=sb-image-comparison] {
  --sb-container-height: 24rem;
  --sb-ic-handle-width: 4px;
  --sb-ic-handle-color: var(--white);
  --sb-ic-handle-size: 50px;
  height: var(--sb-container-height);
  width: 100%;
  overflow: hidden;
  position: relative;
}
[class*=sb-image-comparison] .sb-ic-container {
  width: 100%;
  height: var(--sb-container-height);
  position: relative;
}
[class*=sb-image-comparison] .sb-ic-container .knubbel {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 40;
  color: var(--sb-ic-handle-color);
  cursor: col-resize;
  pointer-events: none;
}
[class*=sb-image-comparison] .sb-ic-container .knubbel::before, [class*=sb-image-comparison] .sb-ic-container .knubbel::after {
  position: absolute;
  content: "";
  width: 4px;
  height: 100px;
  background-color: var(--sb-ic-handle-color);
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-bg, [class*=sb-image-comparison] .sb-ic-container .sb-ic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-bg {
  z-index: 10;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-overlay {
  z-index: 20;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
[class*=sb-image-comparison] .sb-ic-container #bar-top, [class*=sb-image-comparison] .sb-ic-container #bar-bottom {
  content: "";
  position: absolute;
  width: 4px;
  background-color: var(--sb-ic-handle-color);
  height: calc(50% - var(--sb-ic-handle-size) / 2 + 2px);
  z-index: 70;
}
[class*=sb-image-comparison] .sb-ic-container #bar-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
[class*=sb-image-comparison] .sb-ic-container #bar-bottom {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber {
  position: absolute;
  z-index: 30;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--sb-ic-handle-width);
  height: var(--sb-container-height); /* Passt sich Container an */
  position: relative;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber::-webkit-slider-thumb::before, [class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber::-webkit-slider-thumb::after {
  content: "";
  position: absolute;
  width: 4px;
  background-color: #f0f;
  height: 100px;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber::-webkit-slider-thumb::before {
  top: 1rem;
  left: 1rem;
}
[class*=sb-image-comparison] .sb-ic-container .sb-ic-grabber::-webkit-slider-thumb::after {
  bottom: 0;
  left: 0;
}

/*
[class*="sb-image-comparison"] {
  --grabber-size: 6rem;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  > img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    object-fit: cover;
    &:nth-child(1) {
      z-index: -2;
    }
    &:nth-child(2) {
      z-index: -1;
    }
  }
  figure {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background-size: cover;
  }
  .divisor {
    background-size: cover;
    position: absolute;
    width: 50%;
    height: 100%;
    &::before,
    &::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 4px;
      height: calc(50% - 25px);
      background: white;
      z-index: 3;
    }
    &::before {
      top: 0;
      box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
    }
    &::after {
      bottom: 0;
      box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
    }
  }
  .handle {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    &::before,
    &::after {
      content: '';
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }
    &::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }
    &::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }
  }
  input[type=range] {
    -webkit-appearance:none;
    -moz-appearance:none;
    position: absolute;
    top: 50%; left: -25px;
    transform: translateY(-50%);
    background-color: transparent;
    width: calc(100% + 50px);
    z-index: 2;

    &:focus,
    &:active {
      border: none;
      outline: none;
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: transparent;
      border: 4px solid white;
      box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
      &::before,
      &::after {
        content: '';
        width: 0;
        height: 0;
        border: 6px inset transparent;
        position: absolute;
        top: 50%;
        margin-top: -6px;
      }
      &::before {
        border-right: 6px solid white;
        //left: 50%;
        right: 5px;
        margin-left: -17px;
      }
      &::after {
        border-left: 6px solid white;
        //right: 50%;
        right: -5px;
        margin-right: -17px;
      }
    }
    &::-moz-range-track {
      -moz-appearance:none;
      height:15px;
      width: 100%;
      background-color: transparent;
      position: relative;
      outline: none;
    }
  }
  .sb-grabber-icon {
    z-index: 10000;
    width: var(--grabber-size);
    height: var(--grabber-size);
    aspect-ratio: 1;
    fill: #f0f;
    &--left {}
    &--right {}
  }
}

 */

/*# sourceMappingURL=styles.css.map */