/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from brands.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 1
 */
/* =============================================================
   Inverta — Section: Brands Marquee Ticker
   Supports Fullwidth (edge-to-edge) & Floating Glass Capsule modes.
   ============================================================= */

.vf-section-brands {
    position: relative;
    width: 100%;
    overflow: visible; /* Keeps WordPress edit shortcut pencils visible */
    z-index: 10;
    transition: background-color 0.15s ease, padding 0.15s ease;
}

/* -------------------------------------------------------------
   Mode 1: Fullwidth (Edge-to-Edge, zero radius, no capsule)
   ------------------------------------------------------------- */
.vf-section-brands.vf-brands-fullwidth-mode {
    border-radius: 0 !important;
    background-color: var(--vf-brands-bg-color, var(--inv-surface, #ffffff));
    padding-top: var(--vf-brands-pt, 36px);
    padding-bottom: var(--vf-brands-pb, 36px);
    padding-left: var(--vf-brands-px, 0);
    padding-right: var(--vf-brands-px, 0);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* -------------------------------------------------------------
   Mode 2: Floating Glass Capsule (Matching Header Bar)
   ------------------------------------------------------------- */
.vf-section-brands.vf-brands-capsule-mode {
    background: transparent !important;
    border: none !important;
    padding: 4px var(--inv-section-px, var(--inv-edge, 10px)) 16px var(--inv-section-px, var(--inv-edge, 10px));
    display: flex;
    justify-content: center;
}

.vf-section-brands.vf-brands-capsule-mode .vf-brands-capsule {
    position: relative;
    width: 100%;
    max-width: var(--inv-shell-max, 100%);
    margin: 0 auto;
    border-radius: var(--vf-brands-capsule-radius, var(--inv-radius-capsule, 20px));
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
    padding: var(--vf-brands-pt, 24px) var(--vf-brands-px, 0) var(--vf-brands-pb, 24px) var(--vf-brands-px, 0);
    box-shadow: var(--inv-shadow-capsule);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 75%, transparent) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
    overflow: hidden;
}

/* -------------------------------------------------------------
   Marquee Outer Container with Feather Mask Edges
   ------------------------------------------------------------- */
.vf-brands-marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    display: flex;
    user-select: none;
    cursor: grab;
    /* Smooth Gradient Edge Masking */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.vf-brands-marquee:active {
    cursor: grabbing;
}

/* Track holding the cloned groups */
.vf-brands-track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Group containing 1 set of items */
.vf-brands-group {
    display: flex;
    align-items: center;
    gap: clamp(3.2rem, 5.5vw, 5.5rem);
    padding-right: clamp(3.2rem, 5.5vw, 5.5rem);
    flex-shrink: 0;
}

/* Clean, Borderless Brand Logo Item */
.vf-brand-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.35rem 0.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    cursor: pointer;
    opacity: 0.9;
}

.vf-brand-item:hover,
.vf-brand-item:focus-visible {
    opacity: 1;
    transform: scale(1.1);
}

/* Der Fokus braucht hier etwas Eigenes.
 *
 * Vorher stand `outline: none` in derselben Regel wie :hover — die Taste
 * machte also genau das, was der Zeiger macht: ein Logo von 0,9 auf 1,0
 * Deckkraft. Gemessen beim Durchlaufen mit der Tabulatortaste: acht Stationen
 * hintereinander, bei denen nicht zu sehen war, wo man steht. */
.vf-brand-item:focus-visible {
    outline: var(--inv-focus-w, 2px) solid var(--inv-focus-c, var(--inv-accent, #24a9b3));
    outline-offset: 4px;
    border-radius: var(--inv-radius-sm, 10px);
}

/* Vector SVG Logos (Customizable Height & Color) */
.vf-brand-item .vf-brand-svg {
    height: var(--vf-brands-logo-h, 48px);
    width: auto;
    max-width: 180px;
    display: block;
    fill: var(--vf-brands-logo-color, var(--inv-fg, #111827));
    transition: fill 0.25s ease, transform 0.25s ease, height 0.2s ease;
}

.vf-brand-item:hover .vf-brand-svg {
    filter: brightness(0.7);
}

/* Custom Image Logo Fallback */
.vf-brand-item .vf-brand-img {
    height: var(--vf-brands-logo-h, 48px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: filter 0.25s ease, height 0.2s ease;
}

.vf-brand-fallback-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vf-brands-logo-color, var(--inv-fg, #111827));
    letter-spacing: -0.02em;
}


/* -------------------------------------------------------------
   Responsive adjustments: Tablet & Mobile
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .vf-section-brands.vf-brands-capsule-mode {
        padding: 8px 8px 12px 8px;
    }

.vf-section-brands.vf-brands-capsule-mode .vf-brands-capsule {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        border-radius: 16px;
    }

.vf-section-brands.vf-brands-fullwidth-mode {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

.vf-brand-item .vf-brand-svg,
.vf-brand-item .vf-brand-img {
        height: clamp(22px, calc(var(--vf-brands-logo-h, 48px) * 0.6), 28px) !important;
        max-width: 115px !important;
    }

.vf-brands-group {
        gap: clamp(1.8rem, 3.5vw, 2.8rem);
        padding-right: clamp(1.8rem, 3.5vw, 2.8rem);
    }
}

@media (max-width: 768px) {
    .vf-section-brands.vf-brands-capsule-mode {
        padding: 6px 6px 10px 6px !important;
    }

.vf-section-brands.vf-brands-capsule-mode .vf-brands-capsule {
        border-radius: 14px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

.vf-section-brands.vf-brands-fullwidth-mode {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

.vf-brand-item .vf-brand-svg,
.vf-brand-item .vf-brand-img {
        height: clamp(16px, calc(var(--vf-brands-logo-h, 48px) * 0.42), 22px) !important;
        max-width: 85px !important;
    }

.vf-brands-group {
        gap: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}