/* =========================================================
   CSS-only Pill Marquee (frontend.fyi pattern)
   - Edit speed via: --speed (e.g. 35s)
   - Optional reverse: add class .is-reverse to .pill-marquee
   ========================================================= */

/* Wrapper / viewport */
.pill-marquee {
  width: 100%;
  overflow: clip; /* modern; falls du max. Kompatibilität willst: overflow: hidden; */
}

/* Track */
.pill-marquee-track {
  display: flex;
  width: max-content;
  padding-left: 1rem;      /* optional “start offset” */
  gap: 1rem;               /* Abstand zwischen Pills */
  will-change: transform;

  animation: pill-marquee-move var(--speed, 120s) linear infinite;
  animation-direction: var(--direction, normal);
}

/* Pills */
.pill-marquee-track span {
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background:rgb(255 255 255 / 70%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #869280;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 500px;
  font-size:18px;
  line-height:22px;
  font-weight:600;
}

/* The actual movement (name MUST match the animation name above) */
@keyframes pill-marquee-move {
  to {
    transform: translateX(-50%);
  }
}

/* Optional: fade left/right (add class fadeout-horizontal on .pill-marquee) */
.fadeout-horizontal {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 3rem,
    black calc(100% - 3rem),
    transparent
  );
}

/* Optional: pause on hover */
.pill-marquee:hover .pill-marquee-track {
  animation-play-state: paused;
}

/* Optional: reverse direction (add class is-reverse on .pill-marquee) */
.pill-marquee.is-reverse .pill-marquee-track {
  --direction: reverse;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pill-marquee-track {
    animation: none;
  }
}

/* Fallback if overflow: clip isn't supported */
@supports not (overflow: clip) {
  .pill-marquee {
    overflow: hidden;
  }
}

/* Mobile Styles */
@media (max-width: 667px) {


.uk-card {
    border-radius: 24px;
}

.cstm-pos-correction-gal {
  margin-top: 40px;
}


    html{
        font-size: 18px;
        line-height: 1.5;
    }

    .uk-text-lead,
    .uk-text-large {
        font-size: 18px;
        line-height: 1.5;
    }


    .uk-heading-xlarge {
        font-size: 3.2rem;
    }


    .uk-heading-large {
        font-size: 2.8rem;
    }

    .uk-heading-medium {
        font-size: 2.4rem;
    }

    .uk-heading-small {
        font-size: 2rem;
    }

    .uk-h1,
    h1 {
        font-size: 32px;
    }

    .uk-h2,
    h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .uk-h3,
    h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    .uk-h4,
    h4 {
        font-size: 20px;
    }

    .uk-h5,
    h5 {
        font-size: 18px;
    }

    h6, .uk-h6 {
    font-size: 16px;
  }

    .uk-card {
        border-radius: 16px;
    }

.uk-card-body {
    padding: 16px
}

.uk-accordion-title { font-size:16px; }

   }