/* =========================================================
   SLANTED SECTIONS SYSTEM (WPBakery) – clip-path based
   ========================================================= */

/* 1) GEOMETRIE / WINKEL */
:root{
  /* default 4° -> tan(4°) ≈ 0.0699 */
  --tan-a: 0.0699;

  --slant-min: 28px;
  --slant-max: 120px;

  --slant-depth: clamp(
    var(--slant-min),
    calc(100vw * var(--tan-a)),
    var(--slant-max)
  );

  --pad-1: clamp(3rem, 5vw, 6rem);
}

/* slant-depth IMMER am Element berechnen (pro Section/Row) */
.vc_section.slant-top,
.vc_section.slant-bottom,
.vc_row.slant-top,
.vc_row.slant-bottom{
  --slant-depth: clamp(
    var(--slant-min),
    calc(100vw * var(--tan-a)),
    var(--slant-max)
  ) !important;
}

/* Angle presets (override --tan-a on the element) */
.vc_section.wpbss-angle-2, .vc_row.wpbss-angle-2{ --tan-a: 0.034921 !important; }
.vc_section.wpbss-angle-3, .vc_row.wpbss-angle-3{ --tan-a: 0.052408 !important; }
.vc_section.wpbss-angle-4, .vc_row.wpbss-angle-4{ --tan-a: 0.069927 !important; }
.vc_section.wpbss-angle-5, .vc_row.wpbss-angle-5{ --tan-a: 0.087489 !important; }
.vc_section.wpbss-angle-6, .vc_row.wpbss-angle-6{ --tan-a: 0.105104 !important; }

/* 2) BASIS / STACKING */
.vc_section.slant-top,
.vc_section.slant-bottom,
.vc_row.slant-top,
.vc_row.slant-bottom{
  position: relative;
  z-index: auto;
}

.vc_section.slant-front,
.vc_row.slant-front{
  position: relative;
  z-index: 2;
}

.vc_section.slant-overlap-prev,
.vc_row.slant-overlap-prev{
  margin-top: calc(-1 * var(--slant-depth));
  padding-top: var(--slant-depth);
  position: relative;
  z-index: 1;
}

/* 3) FORM / CLIP-PATH – STANDARDRICHTUNG */

/* ---------- NUR TOP (rechts höher) ---------- */
.vc_section.slant-top:not(.slant-bottom):not(.slant-flip-x),
.vc_section.slant-top:not(.slant-bottom):not(.slant-flip-x):before,
.vc_row.slant-top:not(.slant-bottom):not(.slant-flip-x),
.vc_row.slant-top:not(.slant-bottom):not(.slant-flip-x):before{
  clip-path: polygon(
    0 var(--slant-depth),
    100% 0,
    100% 100%,
    0 100%
  );
}

/* ---------- NUR BOTTOM (rechts tiefer) ---------- */
.vc_section.slant-bottom:not(.slant-top):not(.slant-flip-x),
.vc_section.slant-bottom:not(.slant-top):not(.slant-flip-x):before,
.vc_row.slant-bottom:not(.slant-top):not(.slant-flip-x),
.vc_row.slant-bottom:not(.slant-top):not(.slant-flip-x):before{
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - var(--slant-depth))
  );
}

/* ---------- TOP + BOTTOM ---------- */
.vc_section.slant-top.slant-bottom:not(.slant-flip-x),
.vc_section.slant-top.slant-bottom:not(.slant-flip-x):before,
.vc_row.slant-top.slant-bottom:not(.slant-flip-x),
.vc_row.slant-top.slant-bottom:not(.slant-flip-x):before{
  clip-path: polygon(
    0 var(--slant-depth),
    100% 0,
    100% 100%,
    0 calc(100% - var(--slant-depth))
  );
}

/* 4) FORM / CLIP-PATH – GESPIEGELT (slant-flip-x) */

/* ---------- NUR TOP (links höher) ---------- */
.vc_section.slant-top.slant-flip-x:not(.slant-bottom),
.vc_section.slant-top.slant-flip-x:not(.slant-bottom):before,
.vc_row.slant-top.slant-flip-x:not(.slant-bottom),
.vc_row.slant-top.slant-flip-x:not(.slant-bottom):before{
  clip-path: polygon(
    0 0,
    100% var(--slant-depth),
    100% 100%,
    0 100%
  );
}

/* ---------- NUR BOTTOM (links tiefer) ---------- */
.vc_section.slant-bottom.slant-flip-x:not(.slant-top),
.vc_section.slant-bottom.slant-flip-x:not(.slant-top):before,
.vc_row.slant-bottom.slant-flip-x:not(.slant-top),
.vc_row.slant-bottom.slant-flip-x:not(.slant-top):before{
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--slant-depth)),
    0 100%
  );
}

/* ---------- TOP + BOTTOM (gespiegelt) ---------- */
.vc_section.slant-top.slant-bottom.slant-flip-x,
.vc_section.slant-top.slant-bottom.slant-flip-x:before,
.vc_row.slant-top.slant-bottom.slant-flip-x,
.vc_row.slant-top.slant-bottom.slant-flip-x:before{
  clip-path: polygon(
    0 0,
    100% var(--slant-depth),
    100% calc(100% - var(--slant-depth)),
    0 100%
  );
}

/* 5) CONTENT-ABSTAND – pad-* (NUR SECTION, AUTO SAFE) */
.vc_section.pad-1{
  padding-top: var(--pad-1) !important;
  padding-bottom: var(--pad-1) !important;
}
.vc_section.pad-top-1{ padding-top: var(--pad-1) !important; }
.vc_section.pad-bottom-1{ padding-bottom: var(--pad-1) !important; }

.vc_section.slant-top.pad-1,
.vc_section.slant-top.pad-top-1{
  padding-top: calc(var(--pad-1) + var(--slant-depth)) !important;
}

.vc_section.slant-bottom.pad-1,
.vc_section.slant-bottom.pad-bottom-1{
  padding-bottom: calc(var(--pad-1) + var(--slant-depth)) !important;
}

/* OPTIONAL: ROW padding behavior */
.vc_row.pad-1 > .vc_column{
  padding-top: var(--pad-1) !important;
  padding-bottom: var(--pad-1) !important;
}
.vc_row.pad-top-1 > .vc_column{ padding-top: var(--pad-1) !important; }
.vc_row.pad-bottom-1 > .vc_column{ padding-bottom: var(--pad-1) !important; }
.vc_row.slant-top.pad-1 > .vc_column,
.vc_row.slant-top.pad-top-1 > .vc_column{
  padding-top: calc(var(--pad-1) + var(--slant-depth)) !important;
}
.vc_row.slant-bottom.pad-1 > .vc_column,
.vc_row.slant-bottom.pad-bottom-1 > .vc_column{
  padding-bottom: calc(var(--pad-1) + var(--slant-depth)) !important;
}