/**
 * ========================================================================
 * Cutout (co) Utility Classes using CSS Variables
 * ========================================================================
 *
 * Verwendet clip-path, um ein Dreieck aus einer Ecke eines Elements zu schneiden.
 * Diese Version nutzt CSS-Variablen für eine einfache Wartung der Größen.
 *
 * Namenskonvention: .co-[position]-[größe]
 *
 * Positionen (Kurzform):
 *   - br: bottom-right
 *   - bl: bottom-left
 *   - tr: top-right
 *   - tl: top-left
 *
 * Größen:
 *   - l: Large
 *   - m: Medium
 *   - s: Small
 *
 * Beispiel: .co-br-l schneidet ein großes Dreieck aus der unteren rechten Ecke.
 */

/* 1. Definition der Größen als CSS-Variablen */
:root {
  --co-size-l: 110px;
  --co-size-m: 85px;
  --co-size-s: 55px;

  @media (max-width: 1440px) {
    --co-size-l: 55px;
    --co-size-m: 45px;
    --co-size-s: 30px;
  }

  @media (max-width: 478px) {
    --co-size-l: 40px;
    --co-size-m: 30px;
    --co-size-s: 20px;
  }
}

/* 2. Definition der Klassen, die die Variablen verwenden */

/* --- Bottom Right (br) --- */
.co-br-l {
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--co-size-l)), calc(100% - var(--co-size-l)) 100%, 0% 100%);
}
.co-br-m {
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--co-size-m)), calc(100% - var(--co-size-m)) 100%, 0% 100%);
}
.co-br-s {
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--co-size-s)), calc(100% - var(--co-size-s)) 100%, 0% 100%);
}

/* --- Bottom Left (bl) --- */
.co-bl-l {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--co-size-l) 100%, 0% calc(100% - var(--co-size-l)));
}
.co-bl-m {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--co-size-m) 100%, 0% calc(100% - var(--co-size-m)));
}
.co-bl-s {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--co-size-s) 100%, 0% calc(100% - var(--co-size-s)));
}

/* --- Top Right (tr) --- */
.co-tr-l {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-l)) 0%, 100% var(--co-size-l), 100% 100%, 0% 100%);
}
.co-tr-m {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-m)) 0%, 100% var(--co-size-m), 100% 100%, 0% 100%);
}
.co-tr-s {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-s)) 0%, 100% var(--co-size-s), 100% 100%, 0% 100%);
}

/* --- Top Left (tl) --- */
.co-tl-l {
  clip-path: polygon(var(--co-size-l) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--co-size-l));
}
.co-tl-m {
  clip-path: polygon(var(--co-size-m) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--co-size-m));
}
.co-tl-s {
  clip-path: polygon(var(--co-size-s) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--co-size-s));
}

/* --- Top Left + Bottom Right (tl-br) --- */
.co-tl-br-l {
  clip-path: polygon(var(--co-size-l) 0%, 100% 0%, 100% calc(100% - var(--co-size-l)), calc(100% - var(--co-size-l)) 100%, 0% 100%, 0% var(--co-size-l));
}
.co-tl-br-m {
  clip-path: polygon(var(--co-size-m) 0%, 100% 0%, 100% calc(100% - var(--co-size-m)), calc(100% - var(--co-size-m)) 100%, 0% 100%, 0% var(--co-size-m));
}
.co-tl-br-s {
  clip-path: polygon(var(--co-size-s) 0%, 100% 0%, 100% calc(100% - var(--co-size-s)), calc(100% - var(--co-size-s)) 100%, 0% 100%, 0% var(--co-size-s));
}

/* --- Top Right + Bottom Left (tr-bl) --- */
.co-tr-bl-l {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-l)) 0%, 100% var(--co-size-l), 100% 100%, var(--co-size-l) 100%, 0% calc(100% - var(--co-size-l)));
}
.co-tr-bl-m {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-m)) 0%, 100% var(--co-size-m), 100% 100%, var(--co-size-m) 100%, 0% calc(100% - var(--co-size-m)));
}
.co-tr-bl-s {
  clip-path: polygon(0% 0%, calc(100% - var(--co-size-s)) 0%, 100% var(--co-size-s), 100% 100%, var(--co-size-s) 100%, 0% calc(100% - var(--co-size-s)));
}

.button-corners {
  position: relative;
  --size: 20px;
  --border-width: 5px;
}

.button-corners > * {
  z-index: 1;
}

.button-corners:after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background:
    linear-gradient(var(--blue) var(--size), transparent 0 calc(100% - var(--size)), var(--blue) 0) 0 0 / var(--border-width) 100%,
    linear-gradient(var(--blue) var(--size), transparent 0 calc(100% - var(--size)), var(--blue) 0) 100% 0 / var(--border-width) 100%,
    linear-gradient(to right, var(--blue) var(--size), transparent 0 calc(100% - var(--size)), var(--blue) 0) 0 0 / 100% var(--border-width),
    linear-gradient(to right, var(--blue) var(--size), transparent 0 calc(100% - var(--size)), var(--blue) 0) 0 100% / 100% var(--border-width);
  background-repeat: no-repeat;
}

.brxe-image.caption img {
  height: auto;
}

.brxe-image.caption .bricks-image-caption {
  position: relative;
  bottom: auto;
  background: none;
  color: var(--text);
  pointer-events: all;
  font-style: italic;
  font-size: 80%;
  text-align: left;
}