/* =========================================================
   ASV Website – Hero / Spielcenter
   ========================================================= */

.asv-match-hero {
    position: relative;
    isolation: isolate;
    width: 100vw;
    min-height: 640px;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: var(--asv-navy, #0b1f3a);
    color: var(--asv-white, #fff);
}

.asv-match-hero__backgrounds,
.asv-match-hero__background,
.asv-match-hero__overlay {
    position: absolute;
    inset: 0;
}

.asv-match-hero__background {
    opacity: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
    transition: opacity var(--asv-hero-transition-duration, 900ms) ease;
}

.asv-match-hero__background::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 25%, rgba(227, 6, 19, 0.18), transparent 38%),
        linear-gradient(110deg, rgba(6, 22, 47, 0.88) 0%, rgba(11, 31, 58, 0.60) 38%, rgba(151, 0, 13, 0.50) 72%, rgba(6, 22, 47, 0.82) 100%);
}

.asv-match-hero__background.is-active {
    opacity: 1;
    animation: asvHeroPulse 14s ease-in-out infinite alternate;
}

.asv-match-hero__overlay {
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(3, 13, 28, 0.16), rgba(3, 13, 28, 0.36)),
        linear-gradient(to top, rgba(3, 13, 28, 0.62), transparent 45%);
    pointer-events: none;
}

.asv-match-hero__transition-mask {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: rgba(5, 20, 43, 0);
    transition:
        opacity calc(var(--asv-hero-transition-duration, 900ms) * .55) ease,
        background calc(var(--asv-hero-transition-duration, 900ms) * .55) ease,
        backdrop-filter calc(var(--asv-hero-transition-duration, 900ms) * .55) ease;
}

.asv-match-hero--transition-smooth.is-transitioning .asv-match-hero__transition-mask {
    opacity: 1;
    background: rgba(5, 20, 43, .14);
    backdrop-filter: blur(5px);
}

.asv-match-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 48px));
    min-height: 640px;
    margin: 0 auto;
    padding: 54px 0 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.asv-match-hero__heading {
    margin-bottom: 28px;
    text-align: center;
}

.asv-match-hero__eyebrow {
    display: block;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.asv-match-hero__tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px;
    background: rgba(5, 20, 43, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    backdrop-filter: blur(12px);
}

.asv-match-hero__tab {
    appearance: none;
    border: 0;
    border-radius: 3px;
    padding: 10px 18px;
    background: transparent;
    color: rgba(255,255,255,.74);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.asv-match-hero__tab:hover,
.asv-match-hero__tab:focus-visible,
.asv-match-hero__tab.is-active {
    background: var(--asv-red, #e30613);
    color: #fff;
}


.asv-match-hero__panel .asv-match-card {
    transition:
        opacity calc(var(--asv-hero-transition-duration, 900ms) * .55) ease,
        transform calc(var(--asv-hero-transition-duration, 900ms) * .55) ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.asv-match-hero__panel.is-leaving .asv-match-card,
.asv-match-hero__panel.is-entering .asv-match-card {
    opacity: 0;
}

.asv-match-hero--transition-slide .asv-match-hero__panel.is-leaving .asv-match-card,
.asv-match-hero--transition-slide .asv-match-hero__panel.is-entering .asv-match-card,
.asv-match-hero--transition-smooth .asv-match-hero__panel.is-leaving .asv-match-card,
.asv-match-hero--transition-smooth .asv-match-hero__panel.is-entering .asv-match-card {
    transform: translateY(10px);
}

/* leicht gestaffelt – ähnlich dem bewährten alten Spielecenter */
.asv-match-hero__panel .asv-match-card:nth-child(1) { transition-delay: 0ms; }
.asv-match-hero__panel .asv-match-card:nth-child(2) { transition-delay: 70ms; }
.asv-match-hero__panel .asv-match-card:nth-child(3) { transition-delay: 140ms; }

.asv-match-hero__panel.is-leaving .asv-match-card:nth-child(1) { transition-delay: 0ms; }
.asv-match-hero__panel.is-leaving .asv-match-card:nth-child(2) { transition-delay: 60ms; }
.asv-match-hero__panel.is-leaving .asv-match-card:nth-child(3) { transition-delay: 120ms; }

.asv-match-hero__panel[hidden] {
    display: none !important;
}

.asv-match-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.2fr) minmax(0, .92fr);
    gap: 22px;
    align-items: center;
}

.asv-match-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background: rgba(6, 22, 47, 0.74);
    color: #fff;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 6px;
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
}

.asv-match-card--linkable {
    cursor: pointer;
}

.asv-match-card--linkable:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(0,0,0,.28);
}

.asv-match-card__click-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.asv-match-card__click-layer:focus-visible {
    outline: 3px solid var(--asv-red, #e30613);
    outline-offset: -3px;
}

.asv-match-card__mobile-toggle {
    display: none;
}

.asv-match-card__collapsible-content {
    position: relative;
    z-index: 1;
}

.asv-match-card--last,
.asv-match-card--table {
    min-height: 280px;
}

.asv-match-card--next {
    min-height: 390px;
    padding: 30px 30px 24px;
    background: rgba(255,255,255,.96);
    color: var(--asv-text, #17191d);
    border-color: rgba(255,255,255,.4);
}

.asv-match-card__kicker {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.asv-match-card--next .asv-match-card__kicker {
    color: var(--asv-red, #e30613);
}

.asv-match-card__competition {
    margin-bottom: 20px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
}

.asv-match-card--next .asv-match-card__competition {
    color: var(--asv-gray, #6b7280);
}

.asv-match-card__scoreline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 30px 0 18px;
}

.asv-match-card__side {
    display: flex;
    justify-content: center;
}

.asv-match-card__score {
    font-size: clamp(28px, 2.4vw, 40px);
    letter-spacing: -.03em;
}

.asv-match-card__logo {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.asv-match-card--next .asv-match-card__logo {
    width: 82px;
    height: 82px;
}

.asv-match-card__logo-placeholder {
    display: block;
    width: 64px;
    height: 64px;
}

.asv-match-card__teams {
    margin-bottom: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.asv-match-card__versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 20px 0 26px;
}

.asv-match-card__team-large {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.asv-match-card__team-large span {
    max-width: 150px;
}

.asv-match-card__vs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--asv-navy, #0b1f3a);
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.asv-match-card__vs.is-result {
    font-size: clamp(30px, 3vw, 40px);
    letter-spacing: -.04em;
}

.asv-match-today-outcome {
    display: flex;
    min-height: 58px;
    margin: 24px -30px -24px;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    color: #fff;
    text-align: center;
}

.asv-match-today-outcome span {
    font-size: 17px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.asv-match-today-outcome--win {
    background: linear-gradient(135deg, var(--asv-red, #e30613), #ff2344);
}

.asv-match-today-outcome--draw {
    background: linear-gradient(135deg, #536173, var(--asv-navy, #0b1f3a));
}

.asv-match-today-outcome--loss {
    background: linear-gradient(135deg, #2e3745, #111827);
}

.asv-match-today-outcome--neutral {
    background: var(--asv-navy, #0b1f3a);
}

.asv-match-card__meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.asv-match-card__meta span::before {
    content: "•";
    margin-right: 7px;
    color: var(--asv-red, #e30613);
}

.asv-match-card--next .asv-match-card__meta {
    color: var(--asv-gray, #6b7280);
}


.asv-match-live-status {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label minute"
        "phase minute";
    align-items: center;
    gap: 2px 18px;
    margin: 24px -30px -24px;
    padding: 16px 22px;
    background: var(--asv-red, #e30613);
    color: #fff;
}

.asv-match-live-status[hidden] {
    display: none !important;
}

.asv-match-live-status__label {
    grid-area: label;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.asv-match-live-status__minute {
    grid-area: minute;
    min-width: 68px;
    font-size: 32px;
    line-height: 1;
    text-align: right;
}

.asv-match-live-status__phase {
    grid-area: phase;
    font-size: 11px;
    font-weight: 700;
    opacity: .84;
}

.asv-match-card--next.is-live .asv-match-card__kicker {
    color: var(--asv-red, #e30613);
}

.asv-match-card--next.is-halftime .asv-match-live-status {
    background: var(--asv-navy, #0b1f3a);
}

.asv-match-card--next.is-regulation-finished .asv-match-live-status {
    background: #4b5563;
}

.asv-match-countdown[hidden] {
    display: none !important;
}

.asv-match-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 24px -30px -24px;
    background: rgba(11,31,58,.10);
    border-top: 1px solid rgba(11,31,58,.10);
}

.asv-match-countdown > div {
    padding: 14px 8px;
    text-align: center;
    background: rgba(11,31,58,.035);
}

.asv-match-countdown strong,
.asv-match-countdown span {
    display: block;
}

.asv-match-countdown strong {
    color: var(--asv-navy, #0b1f3a);
    font-size: 26px;
    line-height: 1;
}

.asv-match-countdown span {
    margin-top: 5px;
    color: var(--asv-gray, #6b7280);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}


.asv-match-table {
    margin-top: 20px;
    font-size: 11px;
}

.asv-match-table__head,
.asv-match-table__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 54px 34px 28px;
    gap: 7px;
    align-items: center;
}

.asv-match-table__head {
    padding: 0 8px 10px;
    color: rgba(255,255,255,.52);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.asv-match-table__row {
    min-height: 58px;
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.asv-match-table__row.is-asv {
    background: rgba(227,6,19,.15);
}

.asv-match-table__team {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.asv-match-table__team img {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.asv-match-table__team > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asv-match-table__row strong {
    color: #fff;
}

.asv-match-card__empty {
    margin: 28px 0 0;
    color: rgba(255,255,255,.72);
}

.asv-match-card--next .asv-match-card__empty {
    color: var(--asv-gray, #6b7280);
}

.asv-match-hero__progress {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}

.asv-match-hero__progress span {
    width: 28px;
    height: 2px;
    background: rgba(255,255,255,.28);
}

.asv-match-hero__progress span.is-active {
    background: var(--asv-red, #e30613);
}

@keyframes asvHeroPulse {
    from { transform: scale(1.015); }
    to   { transform: scale(1.065); }
}

@media (max-width: 1024px) {
    .asv-match-hero,
    .asv-match-hero__inner {
        min-height: auto;
    }

    .asv-match-hero__inner {
        padding: 42px 0;
    }

    .asv-match-hero__grid {
        grid-template-columns: 1fr 1.22fr;
    }

    .asv-match-card--table {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .asv-match-hero__inner {
        width: min(100% - 28px, 1280px);
        padding: 34px 0;
    }

    .asv-match-hero__tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
        justify-content: stretch;
        gap: 4px;
    }

    .asv-match-hero__tab {
        width: 100%;
        min-width: 0;
        padding: 10px 6px;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .asv-match-hero__grid {
        display: flex;
        flex-direction: column;
    }

    .asv-match-card {
        width: 100%;
        min-height: 0;
    }

    .asv-match-card--next {
        order: -1;
    }

    .asv-match-card__versus {
        gap: 10px;
    }

    .asv-match-card--next .asv-match-card__logo {
        width: 68px;
        height: 68px;
    }

    .asv-match-live-status {
        margin-left: -30px;
        margin-right: -30px;
        padding: 14px 18px;
    }

    .asv-match-live-status__minute {
        font-size: 28px;
    }

    .asv-match-table__head,
    .asv-match-table__row {
        grid-template-columns: 22px minmax(0, 1fr) 50px 30px 26px;
        gap: 5px;
    }

    .asv-match-card--mobile-collapsible {
        padding-top: 18px;
    }

    .asv-match-card--mobile-collapsible .asv-match-card__mobile-toggle {
        position: relative;
        z-index: 3;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
    }

    .asv-match-card--mobile-collapsible .asv-match-card__chevron {
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .asv-match-card--mobile-collapsible:not(.is-mobile-collapsed) .asv-match-card__chevron {
        transform: rotate(225deg);
    }

    .asv-match-card--mobile-collapsible .asv-match-card__collapsible-content > .asv-match-card__kicker {
        display: none;
    }

    .asv-match-card--mobile-collapsible .asv-match-card__collapsible-content {
        margin-top: 18px;
    }

    .asv-match-card--mobile-collapsible.is-mobile-collapsed {
        min-height: 0;
        padding-bottom: 18px;
    }

    .asv-match-card--mobile-collapsible.is-mobile-collapsed .asv-match-card__collapsible-content,
    .asv-match-card--mobile-collapsible.is-mobile-collapsed .asv-match-card__click-layer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .asv-match-hero__background,
    .asv-match-hero__transition-mask,
    .asv-match-hero__panel .asv-match-card {
        animation: none !important;
        transition: none !important;
    }

    .asv-match-hero__tab,
    .asv-match-card__button {
        transition: none;
    }
}