/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 06 2025 | 11:27:41 */
/* Images */
:root[data-theme="dark"] {
  --hero-image: url("https://contexagon.com/wp-content/uploads/2025/01/dark-hexagon_pattern.jpg");
  --competences-image: url("https://contexagon.com/wp-content/uploads/2025/02/dark-section-competences.jpg");
  --competences-image-2: url("https://contexagon.com/wp-content/uploads/2025/11/dark-section-competences.svg");
  --pattern-tile: url("https://contexagon.com/wp-content/uploads/2025/01/dark-pattern_tile.png");
  --competences-bg: var(--p-primary-800);
}

:root[data-theme="light"] {
  --hero-image: url("https://contexagon.com/wp-content/uploads/2025/01/light-hexagon_pattern.jpg");
  --competences-image: url("https://contexagon.com/wp-content/uploads/2025/02/light-section-competences.jpg"); 
  --competences-image-2: url("https://contexagon.com/wp-content/uploads/2025/11/light-section-competences.svg");
  --pattern-tile: url("https://contexagon.com/wp-content/uploads/2025/01/light-pattern_tile.png");
  --competences-bg: var(--p-accent-100);
}

.hero_img {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /*overflow: hidden;*/
  align-content: center;
}

.hero_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-image) no-repeat center;
  background-size: cover;
  z-index: -1; /* Bild hinter den Text legen */
  mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 1) 75%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

  -webkit-mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 1) 75%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  transform: translateZ(0);
  will-change: opacity, transform;
  transition: all var(--p-transition-duration) var(--p-transition-timing);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero_img::after {
  z-index: -2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-section-primary-body);
  transform: translateZ(0);
  will-change: background-color, transform;
  transition: all var(--p-transition-duration) var(--p-transition-timing);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero_text_content {
  position: relative;
  z-index: 1;
}

.section-competences::before {
  z-index: -7;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--competences-image-2) no-repeat center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(0);
  background-color: var(--competences-bg);
  will-change: background-color, transform;
  transition: all var(--transition-duration) var(--transition-timing);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pattern-background {
  position: relative;
  overflow: hidden;
}

.pattern-background::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -400px;
  width: 200%; /* Breiter für Rotation */
  height: 110%;
  background: var(--pattern-tile) repeat; /* Pattern */
  transform: rotate(-6deg); /* Drehen des Patterns */
  opacity: 0.4; /* Transparenz */
  pointer-events: none; /* Keine Blockade von Interaktionen */
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  mask-size: 100% 100%;
  z-index: 1; /* Sicherstellen, dass es hinter den Inhalten liegt */
  transition: opacity var(--p-transition-duration) var(--p-transition-timing);
}

/*------------------------ Responsive Design ------------------------*/

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero_img::before {
    mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.75) 90%
    );
    -webkit-mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.75) 90%
    );
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero_img::before {
    mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.5) 75%
    );
    -webkit-mask-image: linear-gradient(
      115deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.5) 75%
    );
  }
}