/* Preloader – Ultra-Clean, 3-Segment-Ring dünn hinter leicht pulsierendem Logo (kleiner) */

@keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes logoBWtoColor {
  0%, 100% { filter: grayscale(100%) brightness(0.9); }
  50%      { filter: grayscale(0%) brightness(1.1); }
}

@keyframes ringSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Container */
.loadingio-spinner-ripple-qeokxoivyt {
  width: 170px;   /* vorher 220px */
  height: 170px;  /* vorher 220px */
  display: inline-block;
  overflow: visible;
  position: relative;
  background: none;
}

/* Preloader Haupt-DIV */
.ldio-lth9zt4i5s {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 50% 50%;
}

/* Dünner Ring hinter Logo – 3 Segmente */
.ldio-lth9zt4i5s::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;   /* vorher 180px */
  height: 140px;  /* vorher 180px */
  border-radius: 50%;
  background: conic-gradient(
    #bc2625 0deg 100deg,
    transparent 100deg 120deg,
    #bc2625 120deg 220deg,
    transparent 220deg 240deg,
    #bc2625 240deg 340deg,
    transparent 340deg 360deg
  );
  transform: translate(-50%, -50%);
  animation: ringSpin 8s linear infinite;
  z-index: 0;

  /* Dünner Linien-Effekt angepasst */
  mask-image: radial-gradient(circle 55px at center, transparent 55px, black 58px, black 60px, transparent 63px);
  -webkit-mask-image: radial-gradient(circle 55px at center, transparent 55px, black 58px, black 60px, transparent 63px);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
}

/* Logo zentral */
.ldio-lth9zt4i5s div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;    /* vorher 100px */
  height: 80px;   /* vorher 100px */
  background: url("https://www.retro-boxing.de/assets/css/preloader.webp") no-repeat center center;
  background-size: contain;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1;
  animation: logoPulse 3s ease-in-out infinite, logoBWtoColor 3s ease-in-out infinite;
}

/* Weitere Logos ausblenden */
.ldio-lth9zt4i5s div:nth-child(n+2) {
  display: none;
}

/* Box-Sizing */
.ldio-lth9zt4i5s div {
  box-sizing: content-box;
}