/* GET – Referenzen: eigenständige Sektion */
.references {
    --ref-navy: #253746;
    --ref-yellow: #ffcc00;
    --ref-gap: clamp(18px, 3vw, 46px);
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 8vw, 118px) 0 clamp(65px, 7vw, 100px);
    background: #fff;
    color: var(--ref-navy);
}

.references__heading {
    text-align: center;
    margin-bottom: clamp(38px, 5vw, 66px);
}

.references__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #7b6500;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.references__eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ref-yellow);
    box-shadow: 0 0 0 5px rgba(255, 204, 0, 0.18);
}

.references__heading h2 {
    max-width: 760px;
    margin: 0 auto 15px;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.14;
    letter-spacing: -0.045em;
}

.references__heading h2 span {
    color: #b18a00;
}

.references__heading p {
    margin: 0;
    color: #657582;
    font-size: clamp(14px, 1.5vw, 16px);
}

.references__showcase {
    position: relative;
    display: grid;
    gap: clamp(14px, 2.5vw, 24px);
    /* The edge fade is decorative; logos remain accessible in the DOM. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.references__marquee {
    display: flex;
    overflow: hidden;
    padding: 5px 0;
}

.references__track {
    display: flex;
    width: max-content;
    animation: references-scroll 36s linear infinite;
    will-change: transform;
}

.references__marquee--right .references__track {
    animation-direction: reverse;
    animation-duration: 42s;
}

.references__marquee:hover .references__track,
.references__marquee:focus-within .references__track,
.references__showcase.is-paused .references__track {
    animation-play-state: paused;
}

.references__set {
    display: flex;
    align-items: center;
    gap: var(--ref-gap);
    padding-right: var(--ref-gap);
    flex-shrink: 0;
}

.references__logo {
    width: clamp(158px, 18vw, 242px);
    height: clamp(96px, 11vw, 136px);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 26px;
    background: #f7f8f9;
    border: 1px solid #eff1f3;
    border-radius: 16px;
    transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.references__logo:hover {
    background: #fffdf2;
    border-color: rgba(255, 204, 0, 0.65);
    transform: translateY(-3px);
}

.references__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    transition: filter 250ms ease;
}

.references__logo:hover img { filter: grayscale(0); }

.references__footer {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: clamp(36px, 5vw, 65px);
}

.references__footer p {
    flex: 0 1 auto;
    margin: 0;
    color: #82909a;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

.references__line {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, #d9dfe3, transparent);
}

@keyframes references-scroll {
    to { transform: translateX(-50%); }
}

@media (max-width: 575.98px) {
    .references { --ref-gap: 14px; }
    .references__showcase {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    }
    .references__logo { width: 155px; height: 95px; padding: 15px 20px; }
    .references__footer { gap: 10px; }
    .references__footer p { white-space: normal; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .references__track { animation: none !important; }
    .references__marquee { overflow-x: auto; scrollbar-width: thin; }
    .references__set[aria-hidden="true"] { display: none; }
    .references__logo, .references__logo img { transition: none; }
}