/* ==========================================================
   RSP CD Deckfläche – 31° nach Skizze (16:9)
   Definition:
   - Apex (P1) bei ax = 1/3 oder 2/3, ay = 0.8 oder 0.9
   - Seitenpunkte (P2/P3) liegen auf x=0 und x=100%
   - Linien von Apex zu Seitenpunkten haben 31° (zur Horizontalen)
   - Fläche kann oben oder unten liegen (invtop / invbottom)
   - Farbe via --rsp-cd-color

   WICHTIG (invtop):
   - invtop = horizontale Spiegelung von invbottom
     (x,y) -> (x, 100-y)
   ========================================================== */

.rsp-cd--on{
  position: relative;
  overflow: hidden;

  /* WICHTIG */
  z-index: 0;
}

.rsp-cd--on::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--rsp-cd-color, #ff7100);

  /* Maske */
  z-index: 2;
  pointer-events: none;
}

.rsp-cd--on > .e-con-inner,
.rsp-cd--on > .elementor-container{
  position: relative;
  z-index: 3;
}

/* ganz wichtig bei Motion Effects */
.rsp-cd--on .elementor-background-overlay,
.rsp-cd--on .elementor-motion-effects-layer{
  z-index: 1 !important;
}




/* ----------------------------------------------------------
   Debug Guide: Linien + Apex-Punkt als SVG Overlay
   - wird per CSS Variable --rsp-cd-guide aus der Variante gesetzt
   ---------------------------------------------------------- */
.rsp-cd--on.rsp-cd--debug::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;             /* über Inhalt, damit sichtbar */
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image: var(--rsp-cd-guide);
  opacity: .9;
}

/* ==========================================================
   8 Varianten – Clip-Path
   invbottom: originale Maske
   invtop: Y-Flip von invbottom (x bleibt gleich)
   ========================================================== */

/* -------- ax = 2/3, ay = 0.9 (yL=18.79%, yR=54.39%) -------- */
.rsp-cd--on.rsp-cd--ax23--ay90--invbottom::before{
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 54.39%, 66.667% 90%, 0% 18.79%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 54.39%, 66.667% 90%, 0% 18.79%);
}
/* invtop = Y-Spiegelung von invbottom */
.rsp-cd--on.rsp-cd--ax23--ay90--invtop::before{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 45.61%, 66.667% 10%, 0% 81.21%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 45.61%, 66.667% 10%, 0% 81.21%);
}

/* Debug SVG für ax23/ay90 */
.rsp-cd--on.rsp-cd--ax23--ay90--invbottom{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 105.582 L666.667 505.8 L1000 305.691' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='666.667' cy='505.8' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}
.rsp-cd--on.rsp-cd--ax23--ay90--invtop{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 456.418 L666.667 56.2 L1000 256.309' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='666.667' cy='56.2' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}

/* -------- ax = 2/3, ay = 0.8 (yL=8.79%, yR=44.39%) -------- */
.rsp-cd--on.rsp-cd--ax23--ay80--invbottom::before{
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 44.39%, 66.667% 80%, 0% 8.79%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 44.39%, 66.667% 80%, 0% 8.79%);
}
.rsp-cd--on.rsp-cd--ax23--ay80--invtop::before{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 55.61%, 66.667% 20%, 0% 91.21%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 55.61%, 66.667% 20%, 0% 91.21%);
}

/* Debug SVG für ax23/ay80 */
.rsp-cd--on.rsp-cd--ax23--ay80--invbottom{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 49.382 L666.667 449.6 L1000 249.491' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='666.667' cy='449.6' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}
.rsp-cd--on.rsp-cd--ax23--ay80--invtop{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 512.618 L666.667 112.4 L1000 312.509' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='666.667' cy='112.4' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}

/* -------- ax = 1/3, ay = 0.9 (yL=54.39%, yR=18.79%) -------- */
.rsp-cd--on.rsp-cd--ax13--ay90--invbottom::before{
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 18.79%, 33.333% 90%, 0% 54.39%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 18.79%, 33.333% 90%, 0% 54.39%);
}
.rsp-cd--on.rsp-cd--ax13--ay90--invtop::before{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 81.21%, 33.333% 10%, 0% 45.61%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 81.21%, 33.333% 10%, 0% 45.61%);
}

/* Debug SVG für ax13/ay90 */
.rsp-cd--on.rsp-cd--ax13--ay90--invbottom{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 305.691 L333.333 505.8 L1000 105.582' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='333.333' cy='505.8' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}
.rsp-cd--on.rsp-cd--ax13--ay90--invtop{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 256.309 L333.333 56.2 L1000 456.418' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='333.333' cy='56.2' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}

/* -------- ax = 1/3, ay = 0.8 (yL=44.39%, yR=8.79%) -------- */
.rsp-cd--on.rsp-cd--ax13--ay80--invbottom::before{
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 8.79%, 33.333% 80%, 0% 44.39%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 8.79%, 33.333% 80%, 0% 44.39%);
}
.rsp-cd--on.rsp-cd--ax13--ay80--invtop::before{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 91.21%, 33.333% 20%, 0% 55.61%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 91.21%, 33.333% 20%, 0% 55.61%);
}

/* Debug SVG für ax13/ay80 */
.rsp-cd--on.rsp-cd--ax13--ay80--invbottom{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 249.491 L333.333 449.6 L1000 49.382' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='333.333' cy='449.6' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}
.rsp-cd--on.rsp-cd--ax13--ay80--invtop{
  --rsp-cd-guide: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 562' preserveAspectRatio='none'><path d='M0 312.509 L333.333 112.4 L1000 512.618' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='3'/><circle cx='333.333' cy='112.4' r='7' fill='rgba(255,255,255,0.95)'/></svg>");
}