/* Block: Durchlaufender Banner (Marquee) */

.myk-marquee {
    --myk-marq-pad-y: clamp(0.75rem, 1.5vw, 1.5rem);
    --myk-marq-gap:   clamp(0.5rem, 1vw, 1rem);
    --myk-marq-dur:   30s;

    width: 100%;
    overflow: hidden;
    background: var(--myk-c-dark);
    color: var(--myk-c-light);
}

/* Tempo-Varianten */
.myk-marquee--speed-slow   { --myk-marq-dur: 50s; }
.myk-marquee--speed-normal { --myk-marq-dur: 30s; }
.myk-marquee--speed-fast   { --myk-marq-dur: 16s; }

/* Farb-Themen */
.myk-marquee--dark {
    background: var(--myk-c-dark);
    color: var(--myk-c-light);
}
.myk-marquee--accent {
    background: var(--myk-c-accent);
    color: var(--myk-c-light);
}
.myk-marquee--light {
    background: var(--myk-c-light);
    color: var(--myk-c-dark);
    border-top:    1px solid var(--myk-c-line);
    border-bottom: 1px solid var(--myk-c-line);
}
.myk-marquee--transparent {
    background: transparent;
    color: inherit;
}

.myk-marquee-viewport {
    position: relative;
    overflow: hidden;
    padding: var(--myk-marq-pad-y) 0;
    /* Edge-Fade auf Desktop, damit Items elegant am Rand verschwinden */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.myk-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: var(--myk-marq-gap);
    white-space: nowrap;
    will-change: transform;
    animation: myk-marquee-scroll var(--myk-marq-dur) linear infinite;
}

.myk-marquee--right .myk-marquee-track {
    animation-direction: reverse;
}

.myk-marquee:hover .myk-marquee-track,
.myk-marquee:focus-within .myk-marquee-track {
    animation-play-state: paused;
}

.myk-marquee-item {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--myk-marq-gap);
    line-height: 1.1;
}

.myk-marquee-item--text {
    font-size: var(--myk-fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Logo/Bild-Item */
.myk-marquee-item--image {
    padding-inline: calc(var(--myk-marq-gap) * 1.5);
}
.myk-marquee-logo {
    display: block;
    width: auto;
    height: var(--myk-marq-logo-h, 48px);
    max-width: none;
    object-fit: contain;
    transition: opacity var(--myk-dur-fast) var(--myk-ease),
                filter var(--myk-dur-fast) var(--myk-ease);
}
.myk-marquee--logo-sm { --myk-marq-logo-h: 32px; }
.myk-marquee--logo-md { --myk-marq-logo-h: 48px; }
.myk-marquee--logo-lg { --myk-marq-logo-h: 72px; }

/* Optional: grayscale (für einheitlichen Logo-Look) */
.myk-marquee--grayscale .myk-marquee-logo {
    filter: grayscale(1);
    opacity: 0.78;
}
.myk-marquee--grayscale .myk-marquee-link:hover .myk-marquee-logo,
.myk-marquee--grayscale .myk-marquee-link:focus-visible .myk-marquee-logo {
    filter: grayscale(0);
    opacity: 1;
}

.myk-marquee-link {
    display: inline-flex;
    align-items: center;
}

.myk-marquee-sep {
    display: inline-block;
    opacity: 0.65;
    font-size: 1.1em;
    line-height: 1;
    padding-inline: calc(var(--myk-marq-gap) * 0.25);
}

@keyframes myk-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.3333%); }   /* einer von drei Sequenzen */
}

/* Reduced Motion: nicht scrollen, dafür horizontal scrollbar */
@media (prefers-reduced-motion: reduce) {
    .myk-marquee-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .myk-marquee-track {
        animation: none;
    }
    .myk-marquee-item {
        scroll-snap-align: start;
    }
}

@media (max-width: 600px) {
    .myk-marquee-item { font-size: 0.95rem; }
}