/* === Skeleton-Loader ================================= */
.cpo-loading{            /* 1: Container markiert */
  position:relative;
  overflow:hidden;   /* damit nichts übersteht */
}

/* 2a: gleichmäßige graue Fläche */
.cpo-loading::before{
  content:"";
  position:absolute;
  inset:0;           /* top/right/bottom/left:0 */
  background:#f4f4f4;
  z-index:2;         /* deckt Inhalt ab */
}

/* 2b: wandernder Lichtstreifen */
.cpo-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.6) 50%,
      transparent 100%
    );
  transform:skewX(-45deg) translateX(-100%);
  animation:shimmer 1.5s infinite;
  z-index:3;
}

/* 3: eigentlichen Inhalt unsichtbar schalten */
.cpo-loading h3,
.cpo-loading p{visibility:hidden;}

/* 4: Animation */
@keyframes shimmer{
  0%  { transform:skewX(-45deg) translateX(-100%); }
  100%{ transform:skewX(-45deg) translateX(100%);  }
}