/* HWS Ecke – Eck-Dreieck als Sektions-Hintergrund
   Auf die Sektion/den Container, der das Dreieck zeigen soll, einmalig
   diese Klasse setzen (Elementor -> Erweitert -> CSS-Klasse):
*/
.hws-deco-bg {
  position: relative;
  isolation: isolate; /* eigener Stapelkontext: das Dreieck bleibt IN dieser Sektion hinten */
  overflow: hidden;   /* schneidet Überstand an der Kante ab */
}
/* Zusätzlich setzen, wenn das Dreieck über den Rand der Sektion hinausragen darf: */
.hws-deco-bg.hws-deco-bleed {
  overflow: visible;
}
/* Absicherung: Elementors eigener Inhalts-Wrapper bekommt einen expliziten
   Stapelkontext über dem Dreieck – falls Elementor/Theme sonst intern eine
   Reihenfolge erzeugt, bei der z-index:-1 allein nicht zuverlässig hinter
   den Text/die Bilder dieser Sektion reicht. */
.hws-deco-bg > .elementor-container,
.hws-deco-bg > .e-con-inner,
.hws-deco-bg > .elementor-widget-wrap {
  position: relative;
  z-index: 1;
}

.htri {
  position: absolute;
  bottom: 0;
  width: var(--deco-w, 140px);
  translate: var(--deco-x, 0px) var(--deco-y, 0px);
  transform: translateX(var(--deco-tx, 0)) scaleX(var(--deco-flip, 1));
  line-height: 0;
  pointer-events: none;
  z-index: -1;
}
.htri--left { left: 0; }
.htri--right { right: 0; }
.htri--center { left: 50%; }
.htri--front { z-index: 2; }

.htri svg { display: block; width: 100%; height: auto; }
.htri svg path { fill: var(--deco-color, #F1F1F1); }

@media (max-width: 599px) {
  .htri--hide-mobile { display: none; }
}