/* QPM-Systems – CIE-Diagramm Startseite (gehört zu cie-diagramm.js) */
/* ═══ CIE-Komponente ═══ */
  .cx{position:relative;width:100%;max-width:560px;margin:0 auto}
  .cx-scene{perspective:1300px}
  .cx-stage{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .cx-fly{position:relative;aspect-ratio:1/1.02;width:100%;transform-style:preserve-3d;transform-origin:50% 60%;
    animation:cxFlyIn 2s cubic-bezier(.16,.84,.24,1) both, cxFloat 12s ease-in-out 2.3s infinite}
  @keyframes cxFlyIn{
    0%{opacity:0;transform:translateY(120px) translateZ(-260px) rotateX(64deg) rotateZ(-18deg) scale(.7)}
    45%{opacity:1}
    100%{opacity:1;transform:rotateX(14deg) rotateY(-9deg) rotateZ(0) scale(1)}}
  @keyframes cxFloat{
    0%,100%{transform:rotateX(14deg) rotateY(-9deg) translateY(0)}
    50%{transform:rotateX(9deg) rotateY(-3deg) translateY(-10px)}}
  /* Ebenen mit echter Tiefe: Fläche unten, Raster/Beschriftung, Farbräume schweben darüber */
  .cx-fly canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  #cxFill{transform:translateZ(0)}
  #cxBase{transform:translateZ(2px)}
  #cxGam{transform:translateZ(46px);filter:drop-shadow(0 18px 14px rgba(0,0,0,.12))}
  .cx-cxSheen{position:absolute;inset:0;transform:translateZ(3px);pointer-events:none;overflow:hidden;border-radius:6px}
  .cx-cxSheen::before{content:'';position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:soft-light;transform:skewX(-14deg);animation:cxSheen 7.5s ease-in-out 5.5s infinite}
  @keyframes cxSheen{0%{left:-60%}35%,100%{left:130%}}
  .cx-shadow{position:absolute;left:10%;right:8%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.16),transparent);filter:blur(12px);animation:cxShadow 12s ease-in-out 2.3s infinite;pointer-events:none}
  @keyframes cxShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.65}}
  .cx-tip{position:absolute;z-index:5;pointer-events:none;background:rgba(20,20,22,.95);color:#fff;border-radius:10px;padding:10px 12px;font-size:.78rem;line-height:1.45;min-width:170px;box-shadow:0 12px 32px rgba(0,0,0,.28);border-left:3px solid var(--qpm-red);opacity:0;transform:translateZ(80px) translate(-50%,calc(-100% - 14px));transition:opacity .15s}
  .cx-tip.on{opacity:1}
  .cx-tip .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid rgba(255,255,255,.4)}
  .cx-tip small{display:block;color:rgba(255,255,255,.65);font-size:.7rem;margin-top:3px}
  .cx-info{min-height:48px;margin:22px auto 0;text-align:center;font-size:.86rem;color:var(--qpm-gray);line-height:1.5;max-width:480px}
  .cx-info b{color:var(--qpm-dark)}
  .cx-info .num{display:inline-block;min-width:3.2em;font-variant-numeric:tabular-nums;color:var(--qpm-red);font-weight:700}
  .cx-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:560px;width:100%;margin:10px auto 0}
  @media(max-width:599px){.cx-controls{grid-template-columns:repeat(2,1fr)}}
  .cx-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid var(--qpm-border);border-radius:8px;background:#fff;font:600 .78rem 'Montserrat',sans-serif;color:var(--qpm-dark);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s,box-shadow .25s;opacity:0;transform:translateY(12px);animation:cxBtnIn .5s ease-out forwards}
  @keyframes cxBtnIn{to{opacity:1;transform:none}}
  .cx-btn:hover{transform:translateY(-2px);border-color:#bbb;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .cx-btn b{width:10px;height:10px;border-radius:3px;flex-shrink:0;transition:transform .3s}
  .cx-btn.on{background:var(--qpm-dark);color:#fff;border-color:var(--qpm-dark)}
  .cx-btn.on b{transform:scale(1.3);box-shadow:0 0 8px currentColor}
  .cx-btn.tour::after{content:'';position:absolute;left:0;bottom:0;height:3px;background:var(--qpm-red);animation:cxTourBar var(--tour,3.6s) linear forwards}
  @keyframes cxTourBar{from{width:0}to{width:100%}}
  .cx-group{grid-column:1/-1;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qpm-gray);margin-top:4px}
  .cx-note{margin-top:14px;text-align:center;font-size:.7rem;color:#8a8a8a}
  @media(prefers-reduced-motion:reduce){.cx-fly,.cx-shadow,.cx-btn,.cx-cxSheen::before{animation:none!important;opacity:1;transform:none}}

  /* Einbindung im Startseiten-Hero */
  .hero-vis .cx{max-width:560px}
  @media(max-width:479px){.cx-fly{animation:cxFlyIn 1.6s cubic-bezier(.16,.84,.24,1) both}.cx-shadow{animation:none}}