/*
 * FVF-Partnerwand -- eigenstaendiges CSS (nicht vom Theme abhaengig,
 * laeuft auf jedem Design), nutzt aber die Theme-Akzentfarbe, falls
 * gesetzt (--color-primary), mit einem FVF-roten Fallback.
 *
 * Bewegung ausschliesslich ueber transform/opacity, eigene, kraeftigere
 * Kurven statt der schwachen CSS-Standardwerte (siehe easing.dev).
 */
.widget-fvf-sponsoren {
    --fvfs-red: var(--color-primary, #C8102E);
    --fvfs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    max-width: 68rem;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
}

.fvf-sponsoren__head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }

.fvf-sponsoren__eyebrow {
    display: block;
    color: var(--fvfs-red);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.75rem;
}

.fvf-sponsoren__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
}

.fvf-sponsoren__subtitle { margin: 0.75rem 0 0; opacity: 0.7; line-height: 1.6; }

/* ── Hauptsponsor: ein Block, deutlich groesser als die Wand darunter ── */

.fvf-sponsor-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
    position: relative;
    max-width: 30rem;
    margin: 0 auto 2.5rem;
    padding: 2.5rem 2rem;
    border-radius: var(--wl-radius, 1rem);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Dezentes Trikot-Streifenmuster als Eckakzent, nicht als Vollflaeche
       -- der Fokus bleibt auf dem Logo. */
    background:
        linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(135deg, var(--fvfs-red) 0 10px, transparent 10px 20px) border-box;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms var(--fvfs-ease-out), box-shadow 220ms var(--fvfs-ease-out);
}

.fvf-sponsor-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--fvfs-red);
}

a.fvf-sponsor-main {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    a.fvf-sponsor-main:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
    }
}

a.fvf-sponsor-main:active { transform: scale(0.98); }

.fvf-sponsor-main__badge {
    display: inline-block;
    background: var(--fvfs-red);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
}

.fvf-sponsor-main__logo { max-width: 100%; max-height: 90px; object-fit: contain; }
.fvf-sponsor-main__name { font-size: 1.6rem; font-weight: 800; }
.fvf-sponsor-main__text { margin: 0; opacity: 0.7; font-size: 0.92rem; line-height: 1.55; }

/* ── Wand: alle weiteren Partner, gleichrangig ────────────────────────── */

.fvf-sponsor-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.fvf-sponsor-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--wl-radius, 0.75rem);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 200ms var(--fvfs-ease-out), border-color 200ms var(--fvfs-ease-out), box-shadow 200ms var(--fvfs-ease-out);
}

.fvf-sponsor-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.6);
    transition: filter 200ms ease, transform 220ms var(--fvfs-ease-out);
}

.fvf-sponsor-tile__name {
    font-weight: 700;
    opacity: 0.75;
}

/* Name erscheint als Unterzeile, die aus dem Boden faehrt -- klares
   "da ist mehr"-Signal statt nur einer Farbaenderung. */
.fvf-sponsor-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: var(--fvfs-red);
    transform: translateY(100%);
    transition: transform 200ms var(--fvfs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .fvf-sponsor-tile:hover {
        transform: translateY(-3px);
        border-color: var(--fvfs-red);
        box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.3);
    }
    .fvf-sponsor-tile:hover img { filter: none; transform: scale(1.04); }
    .fvf-sponsor-tile:hover .fvf-sponsor-tile__label { transform: translateY(0); }
}

a.fvf-sponsor-tile:active { transform: scale(0.97); }

/* Beruehrbildschirme (kein Hover): Name/Unterzeile bleiben dauerhaft
   sichtbar statt an eine Geste gebunden zu sein, die es dort nicht gibt. */
@media not all and (hover: hover) {
    .fvf-sponsor-tile__label { transform: translateY(0); position: static; margin-top: 0.5rem; background: none; color: inherit; opacity: 0.75; }
}

/* ── Scroll-Einblenden: gestaffelt, nur wenn Design > Feinschliff aktiv ── */

html.wl-animate .fvf-sponsor-main,
html.wl-animate .fvf-sponsor-wall > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 420ms var(--fvfs-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 420ms var(--fvfs-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

html.wl-animate .widget.wl-in-view .fvf-sponsor-main,
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > * {
    opacity: 1;
    transform: none;
}

html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(1) { transition-delay: 0ms; }
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(2) { transition-delay: 40ms; }
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(3) { transition-delay: 80ms; }
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(4) { transition-delay: 120ms; }
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(5) { transition-delay: 160ms; }
html.wl-animate .widget.wl-in-view .fvf-sponsor-wall > *:nth-child(n+6) { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
    html.wl-animate .fvf-sponsor-main,
    html.wl-animate .fvf-sponsor-wall > * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    a.fvf-sponsor-main:hover,
    .fvf-sponsor-tile:hover { transform: none; }
}