.rgp-look {
  --rgp-look-brightness: 1;
  --rgp-look-contrast: 1;
  --rgp-look-saturation: 1;
  --rgp-look-sepia: 0;
  --rgp-look-hue: 0deg;
  --rgp-look-overlay: transparent;
  --rgp-look-vignette: transparent;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.rgp-look img {
  filter:
    brightness(var(--rgp-look-brightness))
    contrast(var(--rgp-look-contrast))
    saturate(var(--rgp-look-saturation))
    sepia(var(--rgp-look-sepia))
    hue-rotate(var(--rgp-look-hue));
}

.rgp-look--frame::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, var(--rgp-look-overlay), transparent 68%),
    radial-gradient(ellipse at center, transparent 56%, var(--rgp-look-vignette) 100%);
}

.rgp-look--frame[data-rgp-watermark="1"]::after {
  position: absolute;
  z-index: 2;
  right: clamp(8px, 2vw, 18px);
  bottom: clamp(7px, 1.8vw, 15px);
  content: "Rote Gartenpforte";
  color: rgba(255, 255, 255, 0.8);
  font: 400 clamp(11px, 1.6vw, 16px)/1.1 "RGP Kalam", cursive;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.rgp-look--dezent {
  --rgp-look-brightness: 1.015;
  --rgp-look-contrast: 1.05;
  --rgp-look-saturation: 1.1;
  --rgp-look-vignette: rgba(24, 40, 25, 0.08);
}

.rgp-look--gartenlook {
  --rgp-look-brightness: 1.035;
  --rgp-look-contrast: 1.12;
  --rgp-look-saturation: 1.22;
  --rgp-look-sepia: 0.025;
  --rgp-look-overlay: rgba(255, 222, 142, 0.045);
  --rgp-look-vignette: rgba(22, 36, 22, 0.13);
}

.rgp-look--warmes-licht {
  --rgp-look-brightness: 1.07;
  --rgp-look-contrast: 1.025;
  --rgp-look-saturation: 1.08;
  --rgp-look-sepia: 0.11;
  --rgp-look-hue: -3deg;
  --rgp-look-overlay: rgba(255, 214, 133, 0.14);
  --rgp-look-vignette: rgba(72, 43, 21, 0.08);
}

.rgp-look--morgentau {
  --rgp-look-brightness: 1.055;
  --rgp-look-contrast: 1.07;
  --rgp-look-saturation: 1.05;
  --rgp-look-hue: 3deg;
  --rgp-look-overlay: rgba(202, 242, 238, 0.1);
  --rgp-look-vignette: rgba(19, 51, 52, 0.07);
}

.rgp-look--hdr-light {
  --rgp-look-brightness: 1.025;
  --rgp-look-contrast: 1.16;
  --rgp-look-saturation: 1.16;
  --rgp-look-sepia: 0.018;
  --rgp-look-overlay: rgba(255, 247, 223, 0.07);
  --rgp-look-vignette: rgba(16, 29, 18, 0.14);
}

.rgp-look--hell-edel {
  --rgp-look-brightness: 1.17;
  --rgp-look-contrast: 0.9;
  --rgp-look-saturation: 0.94;
  --rgp-look-sepia: 0.045;
  --rgp-look-overlay: rgba(255, 252, 239, 0.26);
  --rgp-look-vignette: rgba(255, 250, 238, 0.08);
}

.rgp-look--volle-pulle {
  --rgp-look-brightness: 1.045;
  --rgp-look-contrast: 1.2;
  --rgp-look-saturation: 1.32;
  --rgp-look-sepia: 0.025;
  --rgp-look-overlay: rgba(255, 210, 110, 0.07);
  --rgp-look-vignette: rgba(12, 25, 15, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  .rgp-look img {
    transition: filter 180ms ease;
  }
}