/* =========================================================
   FUSSBALL BUNDESLIGA HUB
   KOMPLETTE STYLE.CSS
   STAND: SCHRITT 16
========================================================= */


/* =========================================================
   ROOT / FARBEN
========================================================= */

:root {
    --bg: #090b0f;
    --bg-soft: #0e1117;
    --bg-card: #131720;
    --bg-card-2: #10141b;

    --text: #ffffff;
    --text-soft: #b9bec8;
    --text-muted: #747c88;

    --red: #e30613;
    --red-dark: #9f0710;

    --border: rgba(255,255,255,0.07);

    --fan-color: #e30613;

    --header-height: 78px;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.5;
}


body.menu-open,
body.club-modal-open {
    overflow: hidden;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
select {
    font: inherit;
}


button {
    color: inherit;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background: #090b0f;
}


::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        #292f39;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #3a424e;
}


/* =========================================================
   GLOBAL
========================================================= */

.container {
    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto;
}


.section {
    position: relative;

    padding:
        95px 0;
}


.section-dark {
    background:
        #0c0f14;
}


.section-heading {
    max-width: 720px;

    margin-bottom: 42px;
}


.section-heading h2 {
    margin-top: 6px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.2rem
        );

    line-height: 1.05;
}


.section-heading p {
    margin-top: 12px;

    color:
        var(--text-muted);

    font-size: 0.95rem;
}


.section-label {
    display: inline-block;

    color:
        var(--red);

    font-size: 0.68rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.6px;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    min-height: 46px;

    padding:
        12px 18px;

    display:
        inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 9px;

    border:
        1px solid transparent;

    font-size: 0.78rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button-primary {
    background:
        linear-gradient(
            135deg,
            #e30613,
            #b60811
        );

    border-color:
        rgba(255,255,255,0.08);

    color:
        white;

    box-shadow:
        0 12px 30px rgba(227,6,19,0.18);
}


.button-primary:hover {
    box-shadow:
        0 15px 35px rgba(227,6,19,0.3);
}


.button-secondary {
    background:
        rgba(255,255,255,0.035);

    border-color:
        rgba(255,255,255,0.09);

    color:
        #e5e8ed;
}


.button-secondary:hover {
    background:
        rgba(255,255,255,0.07);
}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;

    height:
        var(--header-height);

    display: flex;

    align-items: center;

    background:
        rgba(8,10,14,0.62);

    border-bottom:
        1px solid transparent;

    backdrop-filter:
        blur(18px);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.header.scrolled {
    background:
        rgba(8,10,14,0.94);

    border-bottom-color:
        rgba(255,255,255,0.06);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);
}


.nav-container {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


.logo {
    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    min-width:
        max-content;

    color:
        white;

    font-size: 0.88rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    white-space: nowrap;
}


.logo-icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #191d25,
            #0f1217
        );

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 20px rgba(227,6,19,0.08);
}


.logo > span:last-child {
    white-space: nowrap;
}


.nav {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: nowrap;
}


.nav > a {
    flex-shrink: 0;

    white-space: nowrap;

    color:
        #aeb5bf;

    font-size: 0.72rem;

    font-weight: 700;

    transition:
        color 0.2s ease;
}


.nav > a:not(.nav-discord):hover {
    color:
        white;
}


.favorite-nav-button,
.audio-nav-button {
    min-height: 38px;

    padding:
        7px 10px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.025);

    color:
        #d9dde3;

    font-size: 0.68rem;

    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.favorite-nav-button:hover,
.audio-nav-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.05);
}


.favorite-nav-badge {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 6px;
}


.favorite-nav-badge img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.audio-nav-icon {
    font-size: 0.78rem;
}


.nav-discord {
    width: auto !important;

    min-width:
        max-content !important;

    padding:
        10px 14px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #e30613,
            #b90913
        );

    color:
        white !important;

    font-weight: 900 !important;

    white-space: nowrap !important;

    box-shadow:
        0 8px 25px rgba(227,6,19,0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.nav-discord:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(227,6,19,0.3);
}


.menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.035);

    color:
        white;

    font-size: 1rem;

    cursor: pointer;
}


/* =========================================================
   PREMIUM HERO
========================================================= */

.premium-hero {
    position: relative;

    min-height: 100vh;

    padding:
        calc(var(--header-height) + 70px)
        0
        90px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;
}


.hero-stadium {
    position: absolute;

    z-index: -7;

    inset: 0;

    background:
        url("assets/images/stadium-hero.jpg")
        center center /
        cover
        no-repeat;

    transform:
        scale(1.03);
}


.hero-darkness {
    position: absolute;

    z-index: -6;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,7,10,0.94) 0%,
            rgba(6,8,12,0.86) 40%,
            rgba(6,8,12,0.72) 70%,
            rgba(6,8,12,0.85) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,0.25),
            rgba(5,7,10,0.72)
        );
}


.hero-beam {
    position: absolute;

    z-index: -5;

    width: 300px;
    height: 850px;

    top: -220px;

    opacity: 0.07;

    background:
        linear-gradient(
            180deg,
            white,
            transparent
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.hero-beam-left {
    left: 12%;

    transform:
        rotate(18deg);
}


.hero-beam-right {
    right: 8%;

    transform:
        rotate(-18deg);
}


.hero-red-glow {
    position: absolute;

    z-index: -4;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        #e30613;

    opacity: 0.08;

    filter:
        blur(110px);

    pointer-events: none;
}


.hero-red-glow-left {
    left: -180px;
    bottom: -150px;
}


.hero-red-glow-right {
    right: -180px;
    top: 10%;
}


.hero-content {
    position: relative;

    z-index: 3;

    max-width: 820px;
}


.hub-emblem {
    width: 88px;
    height: 88px;

    margin-bottom: 22px;

    padding: 5px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(227,6,19,0.95),
            rgba(81,4,9,0.9)
        );

    box-shadow:
        0 15px 45px rgba(227,6,19,0.2);
}


.hub-emblem-inner {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        #0c0f14;

    border:
        1px solid rgba(255,255,255,0.09);
}


.hub-ball {
    font-size: 1.45rem;
}


.hub-short {
    margin-top: -2px;

    color:
        white;

    font-size: 0.72rem;

    font-weight: 1000;

    letter-spacing: 1px;
}


.season-badge {
    width: max-content;

    max-width: 100%;

    margin-bottom: 18px;

    padding:
        8px 11px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.035);

    color:
        #aeb5bf;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.6px;
}


.season-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #e30613;

    box-shadow:
        0 0 12px rgba(227,6,19,0.9);
}


.season-divider {
    width: 1px;
    height: 12px;

    background:
        rgba(255,255,255,0.12);
}


.premium-title {
    display: flex;

    flex-direction: column;

    line-height: 0.92;

    text-transform: uppercase;
}


.title-small {
    color:
        #8b929c;

    font-size:
        clamp(
            1.2rem,
            3vw,
            2rem
        );

    font-weight: 800;

    letter-spacing: 5px;
}


.title-main {
    margin-top: 8px;

    color:
        white;

    font-size:
        clamp(
            3rem,
            8vw,
            6.8rem
        );

    font-weight: 1000;

    letter-spacing: -4px;

    text-shadow:
        0 20px 50px rgba(0,0,0,0.35);
}


.premium-slogan {
    margin-top: 23px;

    color:
        #a7aeb8;

    font-size:
        clamp(
            1rem,
            2.5vw,
            1.35rem
        );

    font-weight: 600;
}


.premium-slogan span {
    color:
        white;
}


.premium-description {
    max-width: 690px;

    margin-top: 16px;

    color:
        #8c949f;

    font-size: 0.92rem;

    line-height: 1.7;
}


.premium-buttons {
    margin-top: 27px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.hero-discord-button,
.hero-explore-button {
    min-width: 190px;
}


.premium-tags {
    margin-top: 27px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.premium-tags span {
    padding:
        7px 9px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border-radius: 6px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.055);

    color:
        #7f8792;

    font-size: 0.6rem;

    font-weight: 700;
}


.premium-tags i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #e30613;
}


.stadium-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
}


.stadium-light-row {
    display: grid;

    grid-template-columns:
        repeat(8,1fr);

    gap: 14px;

    opacity: 0.18;
}


.stadium-light-row span {
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            white,
            transparent
        );

    box-shadow:
        0 0 15px white;
}


.premium-scroll {
    position: absolute;

    right: 35px;
    bottom: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color:
        #6e7580;

    font-size: 0.5rem;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.scroll-mouse {
    width: 19px;
    height: 31px;

    padding-top: 6px;

    display: flex;

    justify-content: center;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.18);
}


.scroll-mouse i {
    width: 3px;
    height: 6px;

    border-radius: 10px;

    background:
        white;

    animation:
        scrollDot 1.6s infinite;
}


@keyframes scrollDot {

    0% {
        transform:
            translateY(0);

        opacity: 1;
    }

    100% {
        transform:
            translateY(10px);

        opacity: 0;
    }

}


/* =========================================================
   HERO PARTICLES
========================================================= */

.hero-particles {
    position: absolute;

    z-index: -2;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.hero-particle {
    position: absolute;

    bottom: -20px;

    display: block;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.65);

    animation:
        heroParticleFloat
        linear
        infinite;
}


.hero-particle.red {
    background:
        rgba(227,6,19,0.8);

    box-shadow:
        0 0 8px rgba(227,6,19,0.5);
}


@keyframes heroParticleFloat {

    from {
        transform:
            translateY(0)
            translateX(0);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {
        transform:
            translateY(-110vh)
            translateX(35px);

        opacity: 0;
    }

}


/* =========================================================
   FAVORITE STRIP
========================================================= */

.favorite-strip {
    position: relative;

    z-index: 20;

    background:
        #0c0f14;

    border-top:
        1px solid rgba(255,255,255,0.04);

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}


.favorite-strip-inner {
    min-height: 90px;

    display: flex;

    align-items: center;
}


.favorite-empty,
.favorite-selected {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        18px 0;
}


.favorite-star {
    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.06);

    font-size: 1.1rem;
}


.favorite-empty > div,
.favorite-selected-info {
    flex: 1;
}


.favorite-empty strong,
.favorite-selected-info > strong {
    display: block;

    color:
        white;

    font-size: 0.82rem;
}


.favorite-empty p {
    margin-top: 3px;

    color:
        #707884;

    font-size: 0.65rem;
}


.favorite-select-button,
.favorite-change-button {
    padding:
        9px 12px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.035);

    color:
        white;

    font-size: 0.62rem;

    font-weight: 800;

    cursor: pointer;
}


.favorite-selected-logo {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.06);
}


.favorite-selected-logo img {
    width: 80%;
    height: 80%;

    object-fit: contain;
}


.favorite-selected-logo span {
    width: 100%;
    height: 100%;

    place-items: center;

    color:
        white;

    font-size: 0.65rem;

    font-weight: 900;
}


.favorite-selected-label {
    display: block;

    margin-bottom: 2px;

    color:
        var(--fan-color);

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.favorite-club-meta {
    margin-top: 5px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.favorite-club-meta span {
    color:
        #777f8a;

    font-size: 0.58rem;
}


/* =========================================================
   STATS
========================================================= */

.stats {
    padding:
        38px 0;

    background:
        #090c10;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}


.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;
}


.stat-card {
    padding:
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #12161d,
            #0d1015
        );

    text-align: center;
}


.stat-icon {
    margin-bottom: 4px;

    font-size: 1.1rem;
}


.stat-card strong {
    color:
        white;

    font-size: 1.55rem;
}


.stat-card > span:last-child {
    margin-top: 2px;

    color:
        #6d7580;

    font-size: 0.58rem;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   SPIELTAGS CENTER
========================================================= */

.matchday-section {
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(227,6,19,0.055),
            transparent 35%
        ),
        #0b0e13;
}


.matchday-top {
    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


.matchday-tabs {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.matchday-tab {
    padding:
        9px 12px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.025);

    color:
        #8b939f;

    font-size: 0.65rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.matchday-tab:hover {
    color:
        white;

    border-color:
        rgba(255,255,255,0.13);
}


.matchday-tab.active {
    color:
        white;

    background:
        rgba(227,6,19,0.12);

    border-color:
        rgba(227,6,19,0.3);

    box-shadow:
        inset 0 0 18px rgba(227,6,19,0.04);
}


.matchday-maintenance {
    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #676f7a;

    font-size: 0.56rem;
}


.matchday-maintenance span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #e0a93c;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.matchday-countdown {
    margin-bottom: 18px;

    padding:
        24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        radial-gradient(
            circle at right,
            rgba(227,6,19,0.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0e1117
        );

    overflow: hidden;
}


.countdown-label {
    color:
        var(--red);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.countdown-info h3 {
    margin-top: 4px;

    color:
        white;

    font-size:
        clamp(
            1rem,
            2.5vw,
            1.35rem
        );
}


.countdown-info h3 span {
    margin:
        0 5px;

    color:
        #606875;

    font-size: 0.72rem;
}


.countdown-info p {
    margin-top: 5px;

    color:
        #737b87;

    font-size: 0.62rem;
}


.countdown-clock {
    display: flex;

    align-items: center;

    gap: 10px;
}


.countdown-clock > div {
    min-width: 62px;

    padding:
        10px 8px;

    text-align: center;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(0,0,0,0.18);
}


.countdown-clock strong {
    display: block;

    color:
        white;

    font-size: 1.2rem;
}


.countdown-clock span {
    color:
        #676f7b;

    font-size: 0.5rem;

    text-transform: uppercase;
}


.countdown-clock i {
    color:
        #4c535e;

    font-style: normal;

    font-weight: 900;
}


/* =========================================================
   FIXTURES HEADER
========================================================= */

.fixtures-header {
    margin-top: 28px;
    margin-bottom: 14px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;
}


.fixtures-header span {
    color:
        #707885;

    font-size: 0.6rem;
}


.fixtures-header h3 {
    margin-top: 1px;

    color:
        white;

    font-size: 1rem;
}


.fixtures-season {
    padding:
        5px 8px;

    border-radius: 6px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.025);
}


/* =========================================================
   FIXTURE CARDS
========================================================= */

.fixtures-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 12px;
}


.fixture-card {
    position: relative;

    padding:
        18px;

    overflow: hidden;

    border-radius: 13px;

    border:
        1px solid rgba(255,255,255,0.065);

    background:
        linear-gradient(
            145deg,
            #141820,
            #0e1117
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.fixture-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,0.12);
}


.fixture-card.featured {
    border-color:
        rgba(227,6,19,0.19);

    box-shadow:
        inset 0 0 30px rgba(227,6,19,0.025);
}


.fixture-featured-badge {
    position: absolute;

    top: 0;
    right: 0;

    padding:
        4px 8px;

    border-radius:
        0 13px 0 8px;

    background:
        #e30613;

    color:
        white;

    font-size: 0.46rem;

    font-weight: 900;

    letter-spacing: 0.7px;
}


.fixture-date {
    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color:
        #777f8b;

    font-size: 0.55rem;

    text-transform: uppercase;
}


.fixture-time {
    color:
        #b6bbc3;
}


.fixture-teams {
    min-height: 110px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 12px;
}


.fixture-team {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    text-align: center;
}


.fixture-team-logo {
    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;
}


.fixture-team-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.fixture-team-logo span {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color:
        white;

    font-size: 0.6rem;

    font-weight: 900;
}


.fixture-team strong {
    color:
        #e9ebef;

    font-size: 0.63rem;

    line-height: 1.25;
}


.fixture-vs {
    color:
        #555d68;

    font-size: 0.55rem;

    font-weight: 900;
}


/* =========================================================
   TIPPSPIEL MATCH INPUT
========================================================= */

.fixture-tip {
    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid rgba(255,255,255,0.05);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}


.fixture-tip-label {
    color:
        #838b96;

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.fixture-tip-score {
    display: flex;

    align-items: center;

    gap: 8px;
}


.fixture-tip-score input {
    width: 48px;
    height: 38px;

    padding:
        5px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.08);

    outline: none;

    background:
        rgba(0,0,0,0.18);

    color:
        white;

    text-align: center;

    font-size: 0.82rem;

    font-weight: 900;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.fixture-tip-score input:focus {
    border-color:
        rgba(227,6,19,0.55);

    background:
        rgba(227,6,19,0.04);
}


.fixture-tip-score span {
    color:
        #838b96;

    font-weight: 900;
}


.tip-save-button {
    width: 100%;

    padding:
        8px 9px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.025);

    color:
        #aab1bb;

    font-size: 0.58rem;

    font-weight: 900;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.tip-save-button:hover {
    color:
        white;

    border-color:
        rgba(227,6,19,0.3);

    background:
        rgba(227,6,19,0.07);
}


.tip-save-button.saved {
    color:
        #63d995;

    border-color:
        rgba(48,190,108,0.2);

    background:
        rgba(48,190,108,0.06);
}


.tip-save-button.error {
    color:
        #ef7478;

    border-color:
        rgba(220,60,65,0.2);

    background:
        rgba(220,60,65,0.06);
}


/* Chrome number arrows */

.fixture-tip-score input::-webkit-outer-spin-button,
.fixture-tip-score input::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* Firefox */

.fixture-tip-score input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


/* =========================================================
   TIPPSPIEL ÜBERSCHRIFT
========================================================= */

.tippspiel-heading {
    margin-top: 46px;
    margin-bottom: 18px;

    padding-top: 20px;

    scroll-margin-top: 110px;
}


.tippspiel-heading h3 {
    margin-top: 5px;

    color:
        white;

    font-size:
        clamp(
            1.3rem,
            3vw,
            1.8rem
        );
}


.tippspiel-heading p {
    max-width: 650px;

    margin-top: 6px;

    color:
        #7b8390;

    font-size: 0.72rem;

    line-height: 1.6;
}


/* =========================================================
   TIP SUMMARY
========================================================= */

.tips-summary {
    margin-top: 15px;

    padding:
        15px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.025);
}


.tips-summary strong {
    display: block;

    color:
        white;

    font-size: 0.72rem;
}


.tips-summary div span {
    display: block;

    margin-top: 2px;

    color:
        #6d7581;

    font-size: 0.56rem;
}


.tips-summary-count {
    padding:
        6px 9px;

    flex-shrink: 0;

    border-radius: 7px;

    color:
        #e7e9ed;

    background:
        rgba(227,6,19,0.075);

    border:
        1px solid rgba(227,6,19,0.13);

    font-size: 0.58rem;

    font-weight: 900;
}


/* =========================================================
   TIPP STATISTIK
========================================================= */

.tip-statistics {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;
}


.tip-stat-card {
    position: relative;

    padding:
        18px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        linear-gradient(
            145deg,
            #151922,
            #101319
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.tip-stat-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(227,6,19,0.25);
}


.tip-stat-card span {
    margin-bottom: 6px;

    font-size: 1.1rem;
}


.tip-stat-card strong {
    color:
        white;

    font-size: 1.6rem;

    line-height: 1;
}


.tip-stat-card small {
    margin-top: 6px;

    color:
        #777e8b;

    font-size: 0.6rem;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* =========================================================
   SPIELERGEBNIS
========================================================= */

.fixture-result {
    margin-top: 16px;

    padding: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.06);
}


.fixture-result span {
    color:
        #747b87;

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.fixture-result strong {
    color:
        white;

    font-size: 1.1rem;
}


/* =========================================================
   TIPPAUSWERTUNG
========================================================= */

.tip-evaluation {
    width: 100%;

    margin-top: 2px;

    padding:
        8px 9px;

    border-radius: 7px;

    text-align: center;

    font-size: 0.6rem;

    font-weight: 800;
}


.tip-evaluation.exact {
    color:
        #63d995;

    background:
        rgba(48,190,108,0.08);

    border:
        1px solid rgba(48,190,108,0.2);
}


.tip-evaluation.tendency {
    color:
        #efc85d;

    background:
        rgba(239,190,70,0.07);

    border:
        1px solid rgba(239,190,70,0.2);
}


.tip-evaluation.wrong {
    color:
        #ef7478;

    background:
        rgba(220,60,65,0.07);

    border:
        1px solid rgba(220,60,65,0.2);
}


/* =========================================================
   SCHRITT 15
   TIPPSPERRE
========================================================= */

.fixture-tip-score input:disabled {
    cursor: not-allowed;

    opacity: 0.55;

    color:
        #8d949f;

    background:
        rgba(255,255,255,0.025);

    border-color:
        rgba(255,255,255,0.05);
}


.tip-save-button.locked {
    cursor: not-allowed;

    color:
        #858c98;

    background:
        rgba(255,255,255,0.025);

    border-color:
        rgba(255,255,255,0.06);

    opacity: 0.8;
}


.tip-save-button.locked:hover {
    color:
        #858c98;

    background:
        rgba(255,255,255,0.025);

    border-color:
        rgba(255,255,255,0.06);
}


.tip-lock-info,
.tip-open-info {
    width: 100%;

    padding:
        6px 8px;

    border-radius: 6px;

    text-align: center;

    font-size: 0.52rem;

    font-weight: 800;
}


.tip-lock-info {
    color:
        #8b929d;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.05);
}


.tip-open-info {
    color:
        #5ed18a;

    background:
        rgba(48,190,105,0.05);

    border:
        1px solid rgba(48,190,105,0.12);
}


/* =========================================================
   SCHRITT 14
   PERSÖNLICHES TIPP DASHBOARD
========================================================= */

.tip-dashboard {
    margin-top: 25px;

    padding:
        28px;

    scroll-margin-top: 110px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        radial-gradient(
            circle at top right,
            rgba(227,6,19,0.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151a22,
            #0e1117
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,0.25);
}


/* DASHBOARD HEADER */

.tip-dashboard-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}


.tip-dashboard-header h3 {
    margin-top: 5px;

    color:
        white;

    font-size:
        clamp(
            1.3rem,
            3vw,
            1.8rem
        );
}


.tip-dashboard-header p {
    margin-top: 5px;

    color:
        #7c8491;

    font-size: 0.72rem;
}


.tip-dashboard-rank {
    min-width: 130px;

    padding:
        10px 14px;

    text-align: right;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(0,0,0,0.18);
}


.tip-dashboard-rank span {
    display: block;

    color:
        #676f7c;

    font-size: 0.52rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.tip-dashboard-rank strong {
    display: block;

    margin-top: 3px;

    color:
        var(--red);

    font-size: 0.85rem;
}


/* DASHBOARD KPI */

.tip-dashboard-kpis {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;

    margin-bottom: 25px;
}


.tip-dashboard-kpi {
    padding: 17px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.025);
}


.dashboard-kpi-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(227,6,19,0.08);

    font-size: 1rem;
}


.tip-dashboard-kpi small {
    display: block;

    margin-bottom: 2px;

    color:
        #737b88;

    font-size: 0.55rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.tip-dashboard-kpi strong {
    color:
        white;

    font-size: 1rem;
}


/* DASHBOARD PROGRESS */

.tip-progress-area {
    margin-bottom: 25px;

    padding:
        16px 18px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(0,0,0,0.15);
}


.tip-progress-header {
    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.tip-progress-header strong {
    display: block;

    color:
        white;

    font-size: 0.72rem;
}


.tip-progress-header span {
    color:
        #777f8c;

    font-size: 0.6rem;
}


#tipProgressPercent {
    color:
        var(--red);

    font-weight: 900;
}


.tip-progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.05);
}


.tip-progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #9f0710,
            var(--red)
        );

    box-shadow:
        0 0 15px rgba(227,6,19,0.3);

    transition:
        width 0.5s ease;
}


/* DASHBOARD BOTTOM */

.tip-dashboard-bottom {
    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 15px;
}


.tip-history,
.tip-performance {
    padding: 18px;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(0,0,0,0.14);
}


.tip-dashboard-subheader {
    margin-bottom: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.tip-dashboard-subheader > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.tip-dashboard-subheader h4 {
    color:
        white;

    font-size: 0.8rem;
}


.tip-dashboard-subheader small {
    color:
        #676e79;

    font-size: 0.55rem;
}


/* HISTORY */

.tip-history-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.tip-history-item {
    padding: 11px;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 12px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.04);
}


.tip-history-match strong {
    display: block;

    color:
        #e7eaf0;

    font-size: 0.66rem;
}


.tip-history-match span {
    color:
        #69717e;

    font-size: 0.55rem;
}


.tip-history-score {
    color:
        white;

    font-size: 0.7rem;

    font-weight: 900;
}


.tip-history-result {
    min-width: 75px;

    padding:
        5px 7px;

    border-radius: 6px;

    text-align: center;

    font-size: 0.52rem;

    font-weight: 900;
}


.tip-history-result.exact {
    color:
        #62d68f;

    background:
        rgba(50,190,105,0.08);
}


.tip-history-result.tendency {
    color:
        #efc85d;

    background:
        rgba(230,185,60,0.08);
}


.tip-history-result.wrong {
    color:
        #ef777a;

    background:
        rgba(220,60,65,0.08);
}


.tip-history-result.open {
    color:
        #8d96a4;

    background:
        rgba(255,255,255,0.04);
}


.tip-history-empty {
    padding: 18px;

    text-align: center;

    color:
        #646c78;

    font-size: 0.65rem;
}


/* PERFORMANCE */

.tip-performance-list {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.performance-row {
    padding:
        10px 0;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}


.performance-row:last-child {
    border-bottom: 0;
}


.performance-row > div {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        #89919d;

    font-size: 0.62rem;
}


.performance-row strong {
    color:
        white;

    font-size: 0.7rem;
}


.performance-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}


.performance-dot.exact {
    background:
        #42c87a;
}


.performance-dot.tendency {
    background:
        #e8b83f;
}


.performance-dot.wrong {
    background:
        #df5157;
}


.performance-dot.open {
    background:
        #69717d;
}


/* =========================================================
   SCHRITT 16
   MEIN VEREIN MATCH SPOTLIGHT
========================================================= */

.favorite-match-spotlight {
    position: relative;

    margin-bottom: 30px;

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        linear-gradient(
            145deg,
            #141922,
            #0f1218
        );
}


/* KEIN VEREIN */

.favorite-match-empty {
    padding:
        18px 22px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.favorite-match-empty-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.04);

    font-size: 1.1rem;
}


.favorite-match-empty strong {
    display: block;

    color:
        white;

    font-size: 0.8rem;
}


.favorite-match-empty p {
    margin-top: 3px;

    color:
        #747c88;

    font-size: 0.65rem;
}


/* AUSGEWÄHLTER VEREIN */

.favorite-match-content {
    --favorite-match-color: #e30613;

    position: relative;

    padding:
        22px 25px;

    overflow: hidden;
}


.favorite-match-content::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 180px;

    top: -80px;
    left: -100px;

    border-radius: 50%;

    background:
        var(--favorite-match-color);

    opacity: 0.09;

    filter:
        blur(60px);

    pointer-events: none;
}


.favorite-match-content::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        var(--favorite-match-color);

    box-shadow:
        0 0 20px
        var(--favorite-match-color);
}


/* MATCH SPOTLIGHT HEADER */

.favorite-match-top {
    position: relative;

    z-index: 2;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.favorite-match-label {
    color:
        var(--favorite-match-color);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.favorite-match-league {
    padding:
        5px 8px;

    border-radius: 6px;

    background:
        rgba(255,255,255,0.04);

    color:
        #7e8693;

    font-size: 0.55rem;

    border:
        1px solid rgba(255,255,255,0.06);
}


/* SPIEL */

.favorite-match-game {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;
}


.favorite-match-team {
    display: flex;

    align-items: center;

    gap: 13px;
}


.favorite-match-team.away {
    flex-direction: row-reverse;

    text-align: right;
}


.favorite-match-logo {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: grid;

    place-items: center;
}


.favorite-match-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.favorite-match-logo span {
    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.05);

    color:
        white;

    font-size: 0.65rem;

    font-weight: 900;
}


.favorite-match-team small {
    display: block;

    color:
        #717986;

    font-size: 0.52rem;

    text-transform: uppercase;
}


.favorite-match-team strong {
    color:
        white;

    font-size: 0.85rem;
}


.favorite-match-center {
    min-width: 120px;

    text-align: center;
}


.favorite-match-center strong {
    display: block;

    color:
        white;

    font-size: 1.1rem;
}


.favorite-match-center span {
    display: block;

    margin-top: 2px;

    color:
        #777f8c;

    font-size: 0.57rem;
}


/* FOOTER */

.favorite-match-footer {
    position: relative;

    z-index: 2;

    margin-top: 20px;

    padding-top: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top:
        1px solid rgba(255,255,255,0.05);
}


.favorite-match-footer p {
    color:
        #777f8c;

    font-size: 0.6rem;
}


.favorite-match-button {
    padding:
        8px 12px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.1);

    background:
        rgba(255,255,255,0.04);

    color:
        white;

    font-size: 0.62rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.favorite-match-button:hover {
    transform:
        translateY(-1px);

    background:
        rgba(255,255,255,0.08);
}


/* ANDERE LIGA */

.favorite-match-other-league {
    padding:
        20px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.favorite-match-other-league strong {
    display: block;

    color:
        white;

    font-size: 0.78rem;
}


.favorite-match-other-league p {
    margin-top: 3px;

    color:
        #767e8b;

    font-size: 0.62rem;
}


/* FAVORITE FIXTURE */

.fixture-card.favorite-match {
    border-color:
        var(--fan-color);

    box-shadow:
        0 0 28px
        rgba(255,255,255,0.035);
}


.fixture-favorite-badge {
    position: absolute;

    top: 0;
    left: 0;

    padding:
        4px 8px;

    border-radius:
        13px 0 8px 0;

    background:
        var(--fan-color);

    color:
        white;

    font-size: 0.46rem;

    font-weight: 900;

    letter-spacing: 0.6px;

    z-index: 3;
}


/* FLASH */

@keyframes favoriteMatchFlash {

    0%,
    100% {
        transform:
            translateY(0);
    }

    40% {
        transform:
            translateY(-7px);

        box-shadow:
            0 0 45px
            var(--fan-color);
    }

}


.favorite-match-flash {
    animation:
        favoriteMatchFlash
        0.7s ease
        2;
}


/* =========================================================
   MATCHDAY FOOTER NOTE
========================================================= */

.matchday-footer-note {
    margin-top: 20px;

    padding:
        12px 14px;

    display: flex;

    align-items: flex-start;

    gap: 9px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.02);

    color:
        #69717d;

    font-size: 0.58rem;
}


/* =========================================================
   COMMUNITY / ABOUT
========================================================= */

.about-grid {
    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items: center;

    gap: 50px;
}


.about-content h2 {
    margin-top: 8px;

    font-size:
        clamp(
            2rem,
            4.5vw,
            3.4rem
        );

    line-height: 1.05;
}


.about-content h2 span {
    color:
        var(--red);
}


.about-content p {
    margin-top: 16px;

    max-width: 650px;

    color:
        #7f8792;

    font-size: 0.9rem;

    line-height: 1.7;
}


.check-list {
    margin-top: 23px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;
}


.check-list > div {
    padding:
        10px 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.05);

    color:
        #a0a7b1;

    font-size: 0.66rem;
}


.check-list span {
    color:
        #5bd487;

    font-weight: 900;
}


.stadium-card {
    min-height: 340px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        linear-gradient(
            180deg,
            rgba(11,14,19,0.15),
            rgba(11,14,19,0.95)
        ),
        url("assets/images/stadium-hero.jpg")
        center /
        cover
        no-repeat;

    box-shadow:
        0 30px 60px rgba(0,0,0,0.22);
}


.stadium-card-content {
    padding:
        27px;
}


.stadium-card-content > span {
    font-size: 1.8rem;
}


.stadium-card h3 {
    margin-top: 7px;

    color:
        white;

    font-size: 1.3rem;
}


.stadium-card p {
    margin-top: 8px;

    color:
        #9aa1ab;

    font-size: 0.72rem;

    line-height: 1.6;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 14px;
}


.feature-card {
    padding:
        22px;

    border-radius: 13px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #13171e,
            #0e1116
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.feature-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(227,6,19,0.18);
}


.feature-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(227,6,19,0.07);

    border:
        1px solid rgba(227,6,19,0.11);

    font-size: 1.05rem;
}


.feature-card h3 {
    margin-top: 13px;

    color:
        white;

    font-size: 0.9rem;
}


.feature-card p {
    margin-top: 6px;

    color:
        #737b86;

    font-size: 0.67rem;

    line-height: 1.6;
}


/* =========================================================
   LEAGUES / CLUB CARDS
========================================================= */

.league-section {
    scroll-margin-top: 100px;
}


.club-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    gap: 11px;
}


.club-card {
    --club-color: #e30613;

    position: relative;

    min-height: 155px;

    padding:
        17px 12px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #141820,
            #0f1217
        );

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.club-card::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    top: -55px;
    right: -55px;

    border-radius: 50%;

    background:
        var(--club-color);

    opacity: 0.07;

    filter:
        blur(25px);
}


.club-card:hover {
    transform:
        translateY(-5px);

    border-color:
        var(--club-color);

    box-shadow:
        0 18px 35px rgba(0,0,0,0.18);
}


.club-card:focus-visible {
    outline:
        2px solid var(--club-color);

    outline-offset:
        3px;
}


.club-badge {
    width: 58px;
    height: 58px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.06);

    color:
        white;

    font-size: 0.65rem;

    font-weight: 900;
}


.club-badge img {
    width: 84%;
    height: 84%;

    object-fit: contain;
}


.club-card h3 {
    color:
        #e8ebef;

    font-size: 0.68rem;

    line-height: 1.3;
}


.club-card > span {
    margin-top: 4px;

    color:
        #6f7782;

    font-size: 0.53rem;
}


/* =========================================================
   BOT SHOWCASE
========================================================= */

.bot-showcase-section {
    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(227,6,19,0.06),
            transparent 35%
        ),
        #090c10;
}


.bot-showcase-grid {
    display: grid;

    grid-template-columns:
        0.78fr 1.5fr;

    gap: 20px;
}


.bot-profile-card,
.bot-command-area {
    position: relative;

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        linear-gradient(
            145deg,
            #151922,
            #0e1117
        );
}


.bot-profile-card {
    padding:
        28px;

    text-align: center;
}


.bot-profile-glow {
    position: absolute;

    width: 240px;
    height: 240px;

    top: -100px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #e30613;

    opacity: 0.07;

    filter:
        blur(70px);
}


.bot-avatar-large {
    position: relative;

    width: 88px;
    height: 88px;

    margin:
        0 auto 14px;

    display: grid;

    place-items: center;

    border-radius: 24px;

    background:
        #0e1117;

    border:
        1px solid rgba(255,255,255,0.08);

    font-size: 2rem;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.22);
}


.bot-status-dot {
    position: absolute;

    right: 5px;
    bottom: 7px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        #42cf79;

    border:
        3px solid #0e1117;
}


.bot-version {
    color:
        var(--red);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.bot-profile-card h3 {
    margin-top: 6px;

    font-size: 1.15rem;
}


.bot-profile-card > p {
    margin-top: 7px;

    color:
        #757d88;

    font-size: 0.65rem;
}


.bot-profile-tags {
    margin-top: 17px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 7px;
}


.bot-profile-tags span {
    padding:
        6px 8px;

    border-radius: 6px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    color:
        #8a929d;

    font-size: 0.52rem;
}


.bot-separator {
    height: 1px;

    margin:
        22px 0;

    background:
        rgba(255,255,255,0.055);
}


.bot-facts {
    display: flex;

    flex-direction: column;

    gap: 10px;

    text-align: left;
}


.bot-facts > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.bot-facts span {
    color:
        #6f7782;

    font-size: 0.55rem;
}


.bot-facts strong {
    color:
        #e0e3e7;

    font-size: 0.57rem;
}


.bot-command-area {
    padding:
        26px;
}


.bot-area-header {
    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.mini-label {
    color:
        #6c7480;

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 1.1px;
}


.bot-area-header h3 {
    margin-top: 3px;

    font-size: 1.05rem;
}


.system-badge {
    padding:
        6px 8px;

    display: flex;

    align-items: center;

    gap: 6px;

    border-radius: 6px;

    border:
        1px solid rgba(255,255,255,0.055);

    background:
        rgba(255,255,255,0.025);

    color:
        #7b838f;

    font-size: 0.48rem;

    font-weight: 900;
}


.system-badge span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #4bcd7c;
}


.bot-command-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;
}


.bot-command-card {
    padding:
        13px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.02);
}


.command-icon {
    width: 33px;
    height: 33px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background:
        rgba(227,6,19,0.06);
}


.bot-command-card code {
    color:
        #eceef2;

    font-size: 0.65rem;

    font-weight: 900;
}


.bot-command-card p {
    margin-top: 3px;

    color:
        #6f7782;

    font-size: 0.54rem;

    line-height: 1.5;
}


.bot-note {
    margin-top: 14px;

    padding:
        10px 12px;

    display: flex;

    gap: 8px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(255,255,255,0.045);

    color:
        #676f7a;

    font-size: 0.53rem;
}


/* =========================================================
   DISCORD SHOWCASE
========================================================= */

.discord-premium-section {
    background:
        #0d1015;
}


.discord-showcase {
    display: grid;

    grid-template-columns:
        0.78fr 1.22fr;

    align-items: center;

    gap: 45px;
}


.discord-showcase-content h2 {
    margin-top: 7px;

    font-size:
        clamp(
            2rem,
            4.5vw,
            3.5rem
        );

    line-height: 1.05;
}


.discord-showcase-content h2 span {
    color:
        var(--red);
}


.discord-showcase-content > p {
    margin-top: 15px;

    color:
        #7f8793;

    font-size: 0.85rem;

    line-height: 1.7;
}


.discord-feature-list {
    margin-top: 22px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.discord-feature-list > div {
    padding:
        10px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.045);

    background:
        rgba(255,255,255,0.018);
}


.discord-feature-list > div > span {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    background:
        rgba(255,255,255,0.035);
}


.discord-feature-list p {
    color:
        #747c87;

    font-size: 0.6rem;
}


.discord-feature-list strong {
    display: block;

    color:
        #e5e8ec;

    font-size: 0.64rem;
}


.discord-big-button {
    margin-top: 22px;
}


/* DISCORD WINDOW */

.discord-window {
    overflow: hidden;

    border-radius: 15px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        #1b1d22;

    box-shadow:
        0 35px 80px rgba(0,0,0,0.28);
}


.discord-window-top {
    height: 37px;

    padding:
        0 12px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    background:
        #111318;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}


.window-buttons {
    display: flex;

    gap: 5px;
}


.window-buttons span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #555b65;
}


.window-title {
    color:
        #737985;

    font-size: 0.5rem;
}


.window-status {
    justify-self: end;

    color:
        #4ecb79;

    font-size: 0.55rem;
}


.discord-interface {
    min-height: 430px;

    display: grid;

    grid-template-columns:
        50px 145px 1fr;
}


.discord-serverbar {
    padding-top: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    background:
        #111318;
}


.server-icon {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #252831;

    font-size: 0.75rem;
}


.server-icon.active {
    border-radius: 11px;

    background:
        #e30613;
}


.server-separator {
    width: 22px;
    height: 1px;

    background:
        rgba(255,255,255,0.06);
}


.discord-sidebar {
    padding:
        10px 7px;

    background:
        #17191f;
}


.discord-server-name {
    margin-bottom: 16px;

    color:
        #e0e2e6;

    font-size: 0.58rem;

    font-weight: 900;
}


.channel-category {
    display: block;

    margin:
        11px 6px 4px;

    color:
        #555c67;

    font-size: 0.42rem;

    font-weight: 900;

    letter-spacing: 0.7px;
}


.discord-channel {
    padding:
        5px 6px;

    margin-bottom: 2px;

    border-radius: 4px;

    color:
        #777e88;

    font-size: 0.51rem;
}


.discord-channel.active {
    color:
        #e5e7eb;

    background:
        rgba(255,255,255,0.045);
}


.live-channel {
    color:
        #d96970;
}


.discord-chat {
    display: grid;

    grid-template-rows:
        auto 1fr auto;

    background:
        #1d1f25;
}


.discord-chat-header {
    padding:
        10px 12px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}


.discord-chat-header strong {
    display: block;

    color:
        #e4e6e9;

    font-size: 0.57rem;
}


.discord-chat-header span {
    color:
        #606772;

    font-size: 0.44rem;
}


.discord-messages {
    padding:
        13px;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.discord-message {
    display: flex;

    align-items: flex-start;

    gap: 8px;
}


.discord-user-avatar,
.discord-bot-avatar {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #e30613;

    color:
        white;

    font-size: 0.52rem;

    font-weight: 900;
}


.discord-user-avatar.second {
    background:
        #5865f2;
}


.discord-bot-avatar {
    background:
        #272b34;
}


.message-user {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;
}


.message-user strong {
    color:
        #eceef1;

    font-size: 0.53rem;
}


.message-user > span {
    color:
        #656c76;

    font-size: 0.4rem;
}


.discord-message p {
    margin-top: 2px;

    color:
        #acb1b8;

    font-size: 0.5rem;
}


.discord-bot-tag {
    padding:
        1px 3px;

    border-radius: 2px;

    background:
        #5865f2;

    color:
        white !important;

    font-size: 0.34rem !important;
}


.discord-bot-embed {
    position: relative;

    margin-top: 6px;

    padding:
        10px 10px 9px 13px;

    max-width: 330px;

    border-radius: 4px;

    background:
        #15171b;

    border:
        1px solid rgba(255,255,255,0.04);
}


.embed-line {
    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    border-radius:
        4px 0 0 4px;

    background:
        #e30613;
}


.embed-label {
    color:
        #e45f66;

    font-size: 0.4rem;

    font-weight: 900;
}


.discord-bot-embed h4 {
    margin-top: 2px;

    color:
        white;

    font-size: 0.62rem;
}


.discord-bot-embed > p {
    color:
        #7f858e;

    font-size: 0.45rem;
}


.match-example {
    margin-top: 8px;

    padding:
        7px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 7px;

    border-radius: 4px;

    background:
        rgba(255,255,255,0.025);

    text-align: center;
}


.match-example strong {
    color:
        #cdd1d7;

    font-size: 0.42rem;
}


.match-score {
    color:
        white;

    font-size: 0.6rem;

    font-weight: 900;
}


.discord-bot-embed small {
    display: block;

    margin-top: 7px;

    color:
        #575e68;

    font-size: 0.37rem;
}


.slash-command-preview {
    margin-top: 4px;

    width: max-content;

    padding:
        4px 7px;

    border-radius: 4px;

    background:
        rgba(88,101,242,0.12);

    color:
        #9ca6ff;

    font-size: 0.48rem;
}


.discord-input {
    margin:
        0 12px 12px;

    padding:
        9px 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 6px;

    background:
        #282b32;

    color:
        #686f79;
}


.discord-input p {
    flex: 1;

    font-size: 0.47rem;
}


/* =========================================================
   FAQ
========================================================= */

.faq-container {
    max-width: 850px;
}


.faq {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.faq-item {
    overflow: hidden;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        #11151b;
}


.faq-question {
    width: 100%;

    padding:
        15px 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border: 0;

    background: transparent;

    color:
        #dfe2e7;

    text-align: left;

    font-size: 0.7rem;

    font-weight: 800;

    cursor: pointer;
}


.faq-question span {
    color:
        #777f89;

    font-size: 1rem;

    transition:
        transform 0.2s ease;
}


.faq-item.active
.faq-question span {
    transform:
        rotate(45deg);

    color:
        var(--red);
}


.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.3s ease;
}


.faq-answer p {
    padding:
        0 17px 16px;

    color:
        #777f8a;

    font-size: 0.64rem;

    line-height: 1.6;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
    position: relative;

    min-height: 370px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        url("assets/images/stadium-hero.jpg")
        center /
        cover
        no-repeat;

    text-align: center;
}


.final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,9,13,0.83),
            rgba(7,9,13,0.96)
        );
}


.final-content {
    position: relative;

    z-index: 2;
}


.final-icon {
    font-size: 2rem;
}


.final-content h2 {
    margin-top: 8px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.2rem
        );
}


.final-content p {
    margin-top: 8px;

    color:
        #868e99;
}


.final-content .button {
    margin-top: 20px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding:
        45px 0 20px;

    background:
        #07090c;

    border-top:
        1px solid rgba(255,255,255,0.045);
}


.footer-grid {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 35px;
}


.footer-logo {
    color:
        white;

    font-size: 0.82rem;

    font-weight: 900;
}


.footer-grid p {
    margin-top: 5px;

    color:
        #626a75;

    font-size: 0.58rem;
}


.footer-links {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 13px;
}


.footer-links a {
    color:
        #717985;

    font-size: 0.58rem;
}


.footer-links a:hover {
    color:
        white;
}


.footer-bottom {
    margin-top: 30px;

    padding-top: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,0.04);
}


.footer-bottom p {
    color:
        #535b66;

    font-size: 0.52rem;
}


/* =========================================================
   CLUB MODAL
========================================================= */

.club-modal,
.favorite-modal {
    position: fixed;

    z-index: 4000;

    inset: 0;

    padding:
        20px;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.club-modal.active,
.favorite-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.club-modal-backdrop,
.favorite-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.75);

    backdrop-filter:
        blur(8px);
}


.club-modal-box {
    --modal-club-color: #e30613;

    position: relative;

    z-index: 2;

    width:
        min(
            600px,
            100%
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding:
        27px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        radial-gradient(
            circle at top left,
            color-mix(
                in srgb,
                var(--modal-club-color) 10%,
                transparent
            ),
            transparent 32%
        ),
        #10141a;

    box-shadow:
        0 35px 90px rgba(0,0,0,0.5);
}


.club-modal-close,
.favorite-modal-close {
    position: absolute;

    z-index: 5;

    top: 13px;
    right: 13px;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.035);

    color:
        #8f97a2;

    cursor: pointer;
}


.club-modal-header {
    padding-right: 40px;

    display: flex;

    align-items: center;

    gap: 17px;
}


.club-modal-logo {
    width: 82px;
    height: 82px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.07);

    color:
        white;

    font-weight: 900;
}


.club-modal-logo img {
    width: 84%;
    height: 84%;

    object-fit: contain;
}


.club-modal-league {
    color:
        var(--modal-club-color);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.club-modal-title h2 {
    margin-top: 3px;

    font-size: 1.45rem;
}


.club-modal-title p {
    margin-top: 2px;

    color:
        #727a86;

    font-size: 0.66rem;
}


.club-modal-divider {
    height: 1px;

    margin:
        23px 0;

    background:
        rgba(255,255,255,0.055);
}


.club-modal-info {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;
}


.club-info-card {
    padding:
        13px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.022);
}


.club-info-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.035);
}


.club-info-card div span {
    display: block;

    color:
        #686f7b;

    font-size: 0.48rem;

    text-transform: uppercase;
}


.club-info-card strong {
    display: block;

    margin-top: 2px;

    color:
        #e6e8ec;

    font-size: 0.62rem;
}


.club-modal-discord {
    margin-top: 18px;

    padding:
        14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.05);
}


.club-modal-discord span {
    color:
        white;

    font-size: 0.62rem;

    font-weight: 900;
}


.club-modal-discord p {
    margin-top: 3px;

    color:
        #6c7480;

    font-size: 0.52rem;
}


/* =========================================================
   FAVORITE MODAL
========================================================= */

.favorite-modal-box {
    position: relative;

    z-index: 2;

    width:
        min(
            850px,
            100%
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding:
        27px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        #10141a;

    box-shadow:
        0 35px 90px rgba(0,0,0,0.5);
}


.favorite-modal-header {
    padding-right: 40px;
}


.favorite-modal-header h2 {
    margin-top: 4px;

    font-size: 1.5rem;
}


.favorite-modal-header p {
    margin-top: 4px;

    color:
        #747c87;

    font-size: 0.67rem;
}


.favorite-search {
    margin-top: 20px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.025);
}


.favorite-search input {
    width: 100%;

    padding:
        11px 0;

    border: 0;

    outline: none;

    background: transparent;

    color:
        white;

    font-size: 0.68rem;
}


.favorite-search input::placeholder {
    color:
        #5e6671;
}


.favorite-club-grid {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 9px;
}


.favorite-picker-card {
    --picker-color: #e30613;

    min-height: 120px;

    padding:
        12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.055);

    background:
        rgba(255,255,255,0.02);

    color:
        white;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.favorite-picker-card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--picker-color);
}


.favorite-picker-card.selected {
    border-color:
        var(--picker-color);

    background:
        rgba(255,255,255,0.045);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.02);
}


.favorite-picker-logo {
    width: 46px;
    height: 46px;

    margin-bottom: 4px;

    display: grid;

    place-items: center;
}


.favorite-picker-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.favorite-picker-logo span {
    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    font-size: 0.55rem;

    font-weight: 900;
}


.favorite-picker-card strong {
    font-size: 0.58rem;

    text-align: center;
}


.favorite-picker-card small {
    color:
        #69717d;

    font-size: 0.47rem;
}


.favorite-modal-footer {
    margin-top: 17px;

    padding-top: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top:
        1px solid rgba(255,255,255,0.05);
}


.favorite-modal-footer span {
    color:
        #616975;

    font-size: 0.52rem;
}


.favorite-modal-footer button {
    padding:
        7px 9px;

    border-radius: 6px;

    border:
        1px solid rgba(220,60,65,0.15);

    background:
        rgba(220,60,65,0.05);

    color:
        #d96b70;

    font-size: 0.53rem;

    cursor: pointer;
}


/* =========================================================
   AUDIO CENTER
========================================================= */

.audio-center {
    position: fixed;

    z-index: 3000;

    top: 92px;
    right: 22px;

    width:
        min(
            390px,
            calc(100vw - 30px)
        );

    max-height:
        calc(100vh - 115px);

    overflow-y: auto;

    padding:
        18px;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-10px)
        scale(0.98);

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(15,18,24,0.96);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.48);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


.audio-center.active {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.audio-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.audio-title {
    display: flex;

    align-items: center;

    gap: 10px;
}


.audio-logo {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(227,6,19,0.08);

    border:
        1px solid rgba(227,6,19,0.12);
}


.audio-title span {
    display: block;

    color:
        #666e79;

    font-size: 0.45rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.audio-title h3 {
    margin-top: 2px;

    font-size: 0.88rem;
}


.audio-close {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.025);

    color:
        #818995;

    cursor: pointer;
}


.audio-master {
    margin-top: 17px;

    padding:
        13px;

    border-radius: 9px;

    background:
        rgba(255,255,255,0.022);

    border:
        1px solid rgba(255,255,255,0.05);
}


.audio-setting-title {
    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.audio-setting-title > div {
    display: flex;

    align-items: center;

    gap: 8px;
}


.audio-setting-title strong {
    display: block;

    font-size: 0.62rem;
}


.audio-setting-title small {
    display: block;

    color:
        #656d78;

    font-size: 0.48rem;
}


#volumeValue {
    color:
        #b5bbc4;

    font-size: 0.58rem;
}


#masterVolume {
    width: 100%;

    accent-color:
        var(--red);
}


.audio-option {
    margin-top: 9px;

    padding:
        11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.018);
}


.audio-option-info {
    display: flex;

    align-items: center;

    gap: 9px;
}


.audio-option-icon {
    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.035);
}


.audio-option-info strong {
    display: block;

    font-size: 0.59rem;
}


.audio-option-info span {
    display: block;

    margin-top: 1px;

    color:
        #656d77;

    font-size: 0.46rem;
}


/* SWITCH */

.audio-switch {
    position: relative;

    width: 38px;
    height: 20px;

    flex-shrink: 0;

    cursor: pointer;
}


.audio-switch input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.audio-switch-slider {
    position: absolute;

    inset: 0;

    border-radius: 20px;

    background:
        #303640;

    transition:
        background 0.2s ease;
}


.audio-switch-slider::after {
    content: "";

    position: absolute;

    width: 14px;
    height: 14px;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background:
        white;

    transition:
        transform 0.2s ease;
}


.audio-switch input:checked
+
.audio-switch-slider {
    background:
        var(--red);
}


.audio-switch input:checked
+
.audio-switch-slider::after {
    transform:
        translateX(18px);
}


.audio-divider {
    height: 1px;

    margin:
        15px 0;

    background:
        rgba(255,255,255,0.05);
}


/* RADIO */

.radio-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.radio-live {
    display: flex;

    align-items: center;

    gap: 5px;

    color:
        #e16970;

    font-size: 0.46rem;

    font-weight: 900;
}


.radio-live i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #e30613;

    box-shadow:
        0 0 10px rgba(227,6,19,0.8);
}


.radio-heading h4 {
    margin-top: 2px;

    font-size: 0.75rem;
}


.radio-signal {
    color:
        #58606b;

    font-size: 0.65rem;
}


.radio-station-select {
    margin-top: 12px;
}


.radio-station-select label {
    display: block;

    margin-bottom: 4px;

    color:
        #656d78;

    font-size: 0.47rem;

    text-transform: uppercase;
}


.radio-station-select select {
    width: 100%;

    padding:
        9px 10px;

    outline: none;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        #101319;

    color:
        #daddE2;

    font-size: 0.58rem;
}


.radio-display {
    margin-top: 10px;

    padding:
        11px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.02);
}


.radio-cover {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(227,6,19,0.07);

    font-size: 1rem;
}


.radio-current span {
    display: block;

    color:
        #5d6570;

    font-size: 0.4rem;

    font-weight: 900;
}


.radio-current strong {
    display: block;

    margin-top: 1px;

    font-size: 0.62rem;
}


.radio-current small {
    display: block;

    color:
        #68707b;

    font-size: 0.45rem;
}


.radio-status {
    display: flex;

    align-items: center;

    gap: 4px;

    color:
        #686f79;

    font-size: 0.45rem;

    font-weight: 900;
}


.radio-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #626a75;
}


.radio-status.live {
    color:
        #65d68f;
}


.radio-status.live i {
    background:
        #4ccc7c;

    box-shadow:
        0 0 10px rgba(76,204,124,0.7);
}


.radio-controls {
    margin-top: 11px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;
}


.radio-control {
    display: grid;

    place-items: center;

    border-radius: 50%;

    cursor: pointer;
}


.radio-control.secondary {
    width: 34px;
    height: 34px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.025);

    color:
        #858d98;
}


.radio-control.play {
    width: 46px;
    height: 46px;

    border:
        1px solid rgba(227,6,19,0.25);

    background:
        linear-gradient(
            135deg,
            #e30613,
            #ad0810
        );

    color:
        white;

    box-shadow:
        0 8px 25px rgba(227,6,19,0.2);
}


.radio-message {
    margin-top: 8px;

    color:
        #626a75;

    text-align: center;

    font-size: 0.47rem;
}


.audio-footer {
    margin-top: 16px;

    padding-top: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-top:
        1px solid rgba(255,255,255,0.05);
}


.audio-footer span {
    color:
        #5d6570;

    font-size: 0.46rem;
}


.audio-footer button {
    padding:
        6px 8px;

    border-radius: 6px;

    border:
        1px solid rgba(255,255,255,0.055);

    background:
        rgba(255,255,255,0.02);

    color:
        #818994;

    font-size: 0.46rem;

    cursor: pointer;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   STICKY HEADER ANCHOR FIX
========================================================= */

#spieltag,
#bundesliga,
#zweite-liga,
#about,
#bot,
#faq,
#tipDashboard,
#tippspiel {
    scroll-margin-top:
        105px;
}


/* =========================================================
   RESPONSIVE
========================================================= */


/* =========================================================
   <= 1180px
========================================================= */

@media (max-width: 1180px) {

    .nav {
        gap: 8px;
    }


    .nav > a {
        font-size: 0.64rem;
    }


    .favorite-nav-button,
    .audio-nav-button {
        padding:
            7px 8px;

        font-size: 0.6rem;
    }


    .nav-discord {
        padding:
            9px 10px;
    }


    .club-grid {
        grid-template-columns:
            repeat(5,1fr);
    }

}


/* =========================================================
   DESKTOP NAV KOMPAKT
========================================================= */

@media (min-width: 1100px) {

    .nav-container {
        display: flex;

        align-items: center;

        gap: 14px;
    }


    .logo {
        flex-shrink: 0;

        width: auto !important;

        min-width:
            max-content;

        max-width:
            none !important;

        display: flex;

        align-items: center;

        gap: 9px;

        white-space: nowrap;
    }


    .logo > span:last-child {
        white-space: nowrap;
    }


    .nav {
        flex: 1;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        flex-wrap: nowrap;

        gap: 10px;
    }


    .nav > a {
        white-space: nowrap;
    }


    .favorite-nav-button,
    .audio-nav-button {
        flex-shrink: 0;

        white-space: nowrap;
    }


    .nav-discord {
        flex-shrink: 0;

        width: auto !important;

        min-width:
            max-content !important;

        white-space:
            nowrap !important;
    }

}


/* =========================================================
   <= 1050px
   MOBILE NAV START
========================================================= */

@media (max-width: 1050px) {

    .header {
        height: 70px;
    }


    .nav-container {
        position: relative;
    }


    .menu-button {
        display: grid;

        place-items: center;
    }


    .nav {
        position: fixed;

        top: 70px;
        left: 0;
        right: 0;

        width: 100%;

        max-height:
            calc(100vh - 70px);

        overflow-y: auto;

        padding:
            18px 20px 24px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 7px;

        visibility: hidden;

        opacity: 0;

        transform:
            translateY(-10px);

        background:
            rgba(8,10,14,0.98);

        border-bottom:
            1px solid rgba(255,255,255,0.06);

        backdrop-filter:
            blur(18px);

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }


    .nav.active {
        visibility: visible;

        opacity: 1;

        transform:
            translateY(0);

        pointer-events: auto;
    }


    .nav > a:not(.nav-discord) {
        width: 100%;

        padding:
            11px 10px;

        border-radius: 7px;

        background:
            rgba(255,255,255,0.02);

        border:
            1px solid rgba(255,255,255,0.04);

        font-size: 0.68rem;
    }


    .favorite-nav-button,
    .audio-nav-button {
        width: 100%;

        justify-content: flex-start;

        padding:
            10px;

        min-height: 42px;
    }


    .nav-discord {
        width: 100% !important;

        padding:
            12px;

        text-align: center;
    }


    .premium-hero {
        padding-top:
            125px;
    }


    .club-grid {
        grid-template-columns:
            repeat(4,1fr);
    }


    .fixtures-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .discord-showcase {
        grid-template-columns:
            1fr;
    }


    .bot-showcase-grid {
        grid-template-columns:
            1fr;
    }


    .tip-dashboard-kpis {
        grid-template-columns:
            repeat(2,1fr);
    }


    .tip-dashboard-bottom {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   <= 850px
========================================================= */

@media (max-width: 850px) {

    .section {
        padding:
            75px 0;
    }


    .stats-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .about-grid {
        grid-template-columns:
            1fr;
    }


    .feature-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .club-grid {
        grid-template-columns:
            repeat(3,1fr);
    }


    .favorite-club-grid {
        grid-template-columns:
            repeat(3,1fr);
    }


    .matchday-countdown {
        flex-direction: column;

        align-items: stretch;
    }


    .countdown-clock {
        justify-content: center;
    }


    .discord-interface {
        grid-template-columns:
            48px 130px 1fr;
    }

}


/* =========================================================
   <= 700px
========================================================= */

@media (max-width: 700px) {

    .container {
        width:
            min(
                100% - 28px,
                1180px
            );
    }


    .logo {
        font-size: 0.73rem;
    }


    .logo-icon {
        width: 32px;
        height: 32px;
    }


    .premium-title {
        line-height: 0.96;
    }


    .title-main {
        letter-spacing: -2px;
    }


    .premium-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-discord-button,
    .hero-explore-button {
        width: 100%;
    }


    .premium-scroll {
        display: none;
    }


    .favorite-empty,
    .favorite-selected {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .favorite-select-button,
    .favorite-change-button {
        width: 100%;
    }


    .matchday-top {
        flex-direction: column;

        align-items: stretch;
    }


    .matchday-tabs {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .matchday-tab {
        width: 100%;
    }


    .countdown-clock {
        gap: 6px;
    }


    .countdown-clock > div {
        min-width: 50px;
    }


    .fixtures-grid {
        grid-template-columns:
            1fr;
    }


    .tip-statistics {
        grid-template-columns:
            repeat(2,1fr);
    }


    .tip-dashboard {
        padding:
            20px 15px;
    }


    .tip-dashboard-header {
        flex-direction: column;
    }


    .tip-dashboard-rank {
        width: 100%;

        text-align: left;
    }


    .tip-dashboard-kpis {
        grid-template-columns:
            1fr;
    }


    .tip-history-item {
        grid-template-columns:
            1fr auto;
    }


    .tip-history-result {
        grid-column:
            1 / -1;

        width: 100%;
    }


    .favorite-match-game {
        grid-template-columns:
            1fr;
    }


    .favorite-match-team,
    .favorite-match-team.away {
        flex-direction: column;

        text-align: center;
    }


    .favorite-match-center {
        padding:
            10px 0;
    }


    .favorite-match-footer,
    .favorite-match-other-league {
        flex-direction: column;

        align-items: stretch;
    }


    .favorite-match-button {
        width: 100%;
    }


    .club-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .club-modal-info {
        grid-template-columns:
            1fr;
    }


    .club-modal-discord {
        flex-direction: column;

        align-items: stretch;
    }


    .club-modal-discord .button {
        width: 100%;
    }


    .favorite-club-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .favorite-modal-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .footer-grid,
    .footer-bottom {
        flex-direction: column;
    }


    .footer-links {
        justify-content: flex-start;
    }

}


/* =========================================================
   <= 600px
========================================================= */

@media (max-width: 600px) {

    .section-heading {
        margin-bottom: 30px;
    }


    .season-badge {
        font-size: 0.56rem;
    }


    .stats-grid {
        gap: 8px;
    }


    .stat-card {
        padding:
            16px 10px;
    }


    .feature-grid {
        grid-template-columns:
            1fr;
    }


    .check-list {
        grid-template-columns:
            1fr;
    }


    .tips-summary {
        flex-direction: column;

        align-items: stretch;
    }


    .tips-summary-count {
        text-align: center;
    }


    .fixture-team strong {
        font-size: 0.6rem;
    }


    .favorite-match-top {
        flex-direction: column;

        align-items: flex-start;
    }


    .bot-command-grid {
        grid-template-columns:
            1fr;
    }


    .bot-area-header {
        flex-direction: column;

        align-items: flex-start;
    }


    .discord-interface {
        grid-template-columns:
            45px 1fr;
    }


    .discord-sidebar {
        display: none;
    }


    .discord-chat {
        min-width: 0;
    }


    .favorite-modal-box,
    .club-modal-box {
        padding:
            21px 16px;
    }


    .club-modal-header {
        align-items: flex-start;
    }


    .club-modal-logo {
        width: 65px;
        height: 65px;
    }


    .club-modal-title h2 {
        font-size: 1.1rem;
    }


    .audio-center {
        top: 80px;
        right: 15px;

        width:
            calc(100vw - 30px);

        max-height:
            calc(100vh - 95px);
    }

}


/* =========================================================
   <= 430px
========================================================= */

@media (max-width: 430px) {

    .container {
        width:
            calc(100% - 22px);
    }


    .section {
        padding:
            62px 0;
    }


    .logo {
        font-size: 0.66rem;
    }


    .premium-hero {
        min-height: 92vh;
    }


    .hub-emblem {
        width: 73px;
        height: 73px;
    }


    .title-small {
        font-size: 1rem;

        letter-spacing: 3px;
    }


    .title-main {
        font-size: 2.75rem;

        letter-spacing: -1px;
    }


    .premium-description {
        font-size: 0.8rem;
    }


    .premium-tags span {
        font-size: 0.52rem;
    }


    .stats-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .matchday-tabs {
        grid-template-columns:
            1fr;
    }


    .countdown-clock {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }


    .countdown-clock i {
        display: none;
    }


    .countdown-clock > div {
        width: 100%;
    }


    .tip-statistics {
        grid-template-columns:
            1fr 1fr;
    }


    .club-grid {
        grid-template-columns:
            repeat(2,1fr);

        gap: 8px;
    }


    .club-card {
        min-height: 140px;

        padding:
            13px 8px;
    }


    .club-badge {
        width: 50px;
        height: 50px;
    }


    .favorite-club-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .favorite-picker-card {
        min-height: 105px;
    }


    .radio-display {
        grid-template-columns:
            auto 1fr;
    }


    .radio-status {
        grid-column:
            1 / -1;

        justify-content: center;
    }

}

/* =========================================================
   FIX: HERO WIEDER MITTIG ZENTRIEREN
========================================================= */

.premium-hero {
    text-align: center;
}


.hero-content {
    width: 100%;
    max-width: 1150px;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;

    align-items: center;
}


/* BH Logo mittig */

.hub-emblem {
    margin-left: auto;
    margin-right: auto;
}


/* Saison Badge mittig */

.season-badge {
    margin-left: auto;
    margin-right: auto;
}


/* Überschrift mittig */

.premium-title {
    width: 100%;

    align-items: center;

    text-align: center;
}


.title-small,
.title-main {
    text-align: center;
}


/* Slogan mittig */

.premium-slogan {
    width: 100%;

    text-align: center;
}


/* Beschreibung mittig */

.premium-description {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* Buttons mittig */

.premium-buttons {
    width: 100%;

    justify-content: center;
}


/* Tags mittig */

.premium-tags {
    width: 100%;

    justify-content: center;
}


/* =========================================================
   DESKTOP:
   BUNDESLIGA HUB möglichst wieder in einer Zeile
========================================================= */

@media (min-width: 900px) {

    .title-main {
        white-space: nowrap;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 899px) {

    .title-main {
        white-space: normal;
    }

}

/* =========================================================
   SCHRITT 17
   SPIELTAGS- & TIPPFILTER
========================================================= */

.fixture-filter-bar {
    margin-bottom: 16px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.02);
}


.fixture-filter-info strong {
    display: block;

    color: white;

    font-size: 0.68rem;
}


.fixture-filter-info span {
    display: block;

    margin-top: 2px;

    color: #6f7783;

    font-size: 0.53rem;
}


.fixture-filters {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.fixture-filter {
    padding: 7px 10px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.025);

    color: #838b97;

    font-size: 0.55rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.fixture-filter:hover {
    color: white;

    transform:
        translateY(-1px);

    border-color:
        rgba(255,255,255,0.13);
}


.fixture-filter.active {
    color: white;

    background:
        rgba(227,6,19,0.11);

    border-color:
        rgba(227,6,19,0.3);

    box-shadow:
        0 0 18px rgba(227,6,19,0.05);
}


/* Keine Spiele im Filter */

.fixture-filter-empty {
    grid-column: 1 / -1;

    padding: 35px 20px;

    border-radius: 13px;

    border:
        1px dashed rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.018);

    text-align: center;
}


.fixture-filter-empty span {
    display: block;

    margin-bottom: 7px;

    font-size: 1.4rem;
}


.fixture-filter-empty strong {
    display: block;

    color: white;

    font-size: 0.78rem;
}


.fixture-filter-empty p {
    margin-top: 4px;

    color: #707884;

    font-size: 0.58rem;
}


@media (max-width: 700px) {

    .fixture-filter-bar {
        flex-direction: column;

        align-items: stretch;
    }


    .fixture-filters {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .fixture-filter {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .fixture-filters {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SCHRITT 18
   TRANSFER CENTER
========================================================= */

.transfer-section {
    scroll-margin-top: 105px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(227,6,19,0.06),
            transparent 35%
        ),
        #0c0f14;
}


/* =========================================================
   TRANSFER STATS
========================================================= */

.transfer-stats {
    margin-bottom: 18px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 11px;
}


.transfer-stat-card {
    padding: 16px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #151922,
            #101319
        );
}


.transfer-stat-card > span {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(227,6,19,0.07);
}


.transfer-stat-card strong {
    display: block;

    color: white;

    font-size: 1.05rem;
}


.transfer-stat-card small {
    display: block;

    margin-top: 1px;

    color: #737b86;

    font-size: 0.52rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* =========================================================
   CONTROLS
========================================================= */

.transfer-controls {
    padding: 13px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.02);
}


.transfer-league-tabs,
.transfer-filter-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.transfer-league-tab,
.transfer-filter-button {
    padding: 8px 11px;

    border-radius: 7px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.025);

    color: #838b97;

    font-size: 0.56rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


.transfer-league-tab:hover,
.transfer-filter-button:hover {
    transform: translateY(-1px);

    color: white;

    border-color:
        rgba(255,255,255,0.13);
}


.transfer-league-tab.active,
.transfer-filter-button.active {
    color: white;

    border-color:
        rgba(227,6,19,0.28);

    background:
        rgba(227,6,19,0.1);
}


/* =========================================================
   SEARCH
========================================================= */

.transfer-search-area {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        1fr 240px;

    gap: 10px;
}


.transfer-search {
    padding: 0 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.02);
}


.transfer-search input {
    width: 100%;

    padding: 11px 0;

    border: 0;

    outline: none;

    background: transparent;

    color: white;

    font-size: 0.65rem;
}


.transfer-search input::placeholder {
    color: #5f6772;
}


.transfer-club-filter {
    padding: 7px 10px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.02);
}


.transfer-club-filter label {
    display: block;

    color: #666e79;

    font-size: 0.44rem;

    text-transform: uppercase;
}


.transfer-club-filter select {
    width: 100%;

    margin-top: 2px;

    border: 0;

    outline: none;

    background: #101319;

    color: #d5d9df;

    font-size: 0.59rem;
}


/* =========================================================
   FAVORITE SPOTLIGHT
========================================================= */

.transfer-favorite-spotlight {
    margin-top: 14px;
}


.transfer-favorite-card {
    --transfer-favorite-color: var(--fan-color);

    position: relative;

    padding: 18px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 12px;

    border:
        1px solid var(--transfer-favorite-color);

    background:
        linear-gradient(
            145deg,
            #151a22,
            #0f1218
        );
}


.transfer-favorite-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 180px;

    left: -100px;
    top: -80px;

    border-radius: 50%;

    background:
        var(--transfer-favorite-color);

    opacity: 0.08;

    filter: blur(60px);
}


.transfer-favorite-info {
    position: relative;

    z-index: 2;
}


.transfer-favorite-info > span {
    color:
        var(--transfer-favorite-color);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.transfer-favorite-info strong {
    display: block;

    margin-top: 3px;

    color: white;

    font-size: 0.82rem;
}


.transfer-favorite-info p {
    margin-top: 3px;

    color: #777f8b;

    font-size: 0.58rem;
}


.transfer-favorite-count {
    position: relative;

    z-index: 2;

    min-width: 65px;

    text-align: center;
}


.transfer-favorite-count strong {
    display: block;

    color: white;

    font-size: 1.5rem;
}


.transfer-favorite-count span {
    color: #747c87;

    font-size: 0.48rem;

    text-transform: uppercase;
}


/* =========================================================
   LIST HEADER
========================================================= */

.transfer-list-header {
    margin-top: 28px;
    margin-bottom: 13px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 15px;
}


.transfer-list-header span {
    color: #737b87;

    font-size: 0.56rem;
}


.transfer-list-header strong {
    display: block;

    margin-top: 2px;

    color: white;

    font-size: 0.85rem;
}


.transfer-demo-badge {
    padding: 5px 8px;

    border-radius: 6px;

    background:
        rgba(239,190,70,0.07);

    border:
        1px solid rgba(239,190,70,0.16);

    color: #efc85d !important;

    font-weight: 900;
}


/* =========================================================
   TRANSFER GRID
========================================================= */

.transfer-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 12px;
}


.transfer-card {
    position: relative;

    padding: 17px;

    overflow: hidden;

    border-radius: 13px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #141820,
            #0f1217
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.transfer-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255,255,255,0.12);
}


.transfer-card.favorite-transfer {
    border-color:
        var(--fan-color);

    box-shadow:
        0 0 28px rgba(255,255,255,0.025);
}


/* STATUS */

.transfer-status-row {
    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.transfer-status {
    padding: 4px 7px;

    border-radius: 5px;

    font-size: 0.45rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.transfer-status.confirmed {
    color: #63d995;

    background:
        rgba(48,190,108,0.07);

    border:
        1px solid rgba(48,190,108,0.16);
}


.transfer-status.rumor {
    color: #efc85d;

    background:
        rgba(239,190,70,0.07);

    border:
        1px solid rgba(239,190,70,0.16);
}


.transfer-date {
    color: #636b76;

    font-size: 0.48rem;
}


/* PLAYER */

.transfer-player {
    margin-bottom: 16px;

    text-align: center;
}


.transfer-player h3 {
    color: white;

    font-size: 0.92rem;
}


.transfer-player-meta {
    margin-top: 3px;

    color: #727a85;

    font-size: 0.53rem;
}


/* CLUBS */

.transfer-clubs {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 10px;
}


.transfer-club {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    text-align: center;
}


.transfer-club-logo {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;
}


.transfer-club-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.transfer-club-logo span {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color: white;

    font-size: 0.55rem;

    font-weight: 900;
}


.transfer-club small {
    color: #6b737e;

    font-size: 0.43rem;

    text-transform: uppercase;
}


.transfer-club strong {
    color: #dfe2e6;

    font-size: 0.58rem;

    line-height: 1.25;
}


.transfer-arrow {
    color: var(--red);

    font-size: 1.15rem;

    font-weight: 900;
}


/* DETAILS */

.transfer-details {
    margin-top: 15px;

    padding-top: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    border-top:
        1px solid rgba(255,255,255,0.05);
}


.transfer-type {
    color: #7b838e;

    font-size: 0.51rem;
}


.transfer-fee {
    color: white;

    font-size: 0.59rem;

    font-weight: 900;
}


/* FAVORITE BADGE */

.transfer-favorite-badge {
    position: absolute;

    left: 0;
    bottom: 0;

    padding: 4px 7px;

    border-radius:
        0 7px 0 12px;

    background:
        var(--fan-color);

    color: white;

    font-size: 0.42rem;

    font-weight: 900;
}


/* =========================================================
   EMPTY
========================================================= */

.transfer-empty {
    grid-column: 1 / -1;

    padding: 40px 20px;

    text-align: center;

    border-radius: 13px;

    border:
        1px dashed rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.018);
}


.transfer-empty span {
    display: block;

    font-size: 1.5rem;
}


.transfer-empty strong {
    display: block;

    margin-top: 6px;

    color: white;

    font-size: 0.8rem;
}


.transfer-empty p {
    margin-top: 4px;

    color: #707884;

    font-size: 0.58rem;
}


/* =========================================================
   NOTE
========================================================= */

.transfer-note {
    margin-top: 18px;

    padding: 11px 13px;

    display: flex;

    gap: 8px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.02);

    color: #676f7a;

    font-size: 0.54rem;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .transfer-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .transfer-stats {
        grid-template-columns:
            repeat(2,1fr);
    }


    .transfer-controls {
        flex-direction: column;

        align-items: stretch;
    }

}


@media (max-width: 700px) {

    .transfer-search-area {
        grid-template-columns:
            1fr;
    }


    .transfer-grid {
        grid-template-columns:
            1fr;
    }


    .transfer-favorite-card {
        flex-direction: column;

        align-items: flex-start;
    }


    .transfer-favorite-count {
        text-align: left;
    }

}


@media (max-width: 430px) {

    .transfer-stats {
        grid-template-columns:
            1fr 1fr;
    }


    .transfer-league-tabs,
    .transfer-filter-buttons {
        display: grid;

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SCHRITT 19
   TRANSFER DETAIL MODAL
========================================================= */

.transfer-card {
    cursor: pointer;
}


.transfer-card:focus-visible {
    outline:
        2px solid var(--red);

    outline-offset: 3px;
}


.transfer-modal {
    position: fixed;

    z-index: 5000;

    inset: 0;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.transfer-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.transfer-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.78);

    backdrop-filter:
        blur(9px);
}


.transfer-modal-box {
    position: relative;

    z-index: 2;

    width:
        min(
            680px,
            100%
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding: 28px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        radial-gradient(
            circle at top right,
            rgba(227,6,19,0.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,0.55);
}


.transfer-modal-close {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.035);

    color: #8c949f;

    cursor: pointer;
}


.transfer-modal-close:hover {
    color: white;

    background:
        rgba(255,255,255,0.07);
}


/* =========================================================
   TOP
========================================================= */

.transfer-modal-top {
    padding-right: 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.transfer-modal-status {
    padding: 5px 8px;

    border-radius: 6px;

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.7px;
}


.transfer-modal-status.confirmed {
    color: #63d995;

    border:
        1px solid rgba(48,190,108,0.18);

    background:
        rgba(48,190,108,0.07);
}


.transfer-modal-status.rumor {
    color: #efc85d;

    border:
        1px solid rgba(239,190,70,0.18);

    background:
        rgba(239,190,70,0.07);
}


.transfer-modal-date {
    color: #6c7480;

    font-size: 0.55rem;
}


/* =========================================================
   SPIELER
========================================================= */

.transfer-modal-player {
    margin-top: 28px;

    text-align: center;
}


.transfer-modal-label {
    color: var(--red);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.transfer-modal-player h2 {
    margin-top: 5px;

    color: white;

    font-size:
        clamp(
            1.6rem,
            4vw,
            2.4rem
        );
}


.transfer-modal-player p {
    margin-top: 4px;

    color: #767e89;

    font-size: 0.65rem;
}


/* =========================================================
   TRANSFER ROUTE
========================================================= */

.transfer-modal-route {
    margin-top: 28px;

    padding: 23px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;

    border-radius: 14px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(0,0,0,0.16);
}


.transfer-modal-club {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.transfer-modal-club-label {
    color: #656d79;

    font-size: 0.46rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.transfer-modal-logo {
    width: 76px;
    height: 76px;

    margin: 10px 0;

    display: grid;

    place-items: center;
}


.transfer-modal-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.transfer-modal-logo span {
    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color: white;

    font-size: 0.65rem;

    font-weight: 900;
}


.transfer-modal-club strong {
    color: #e5e8ec;

    font-size: 0.72rem;
}


.transfer-modal-arrow {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    color: var(--red);
}


.transfer-modal-arrow span {
    font-size: 2rem;

    text-shadow:
        0 0 18px rgba(227,6,19,0.35);
}


.transfer-modal-arrow small {
    color: #626a76;

    font-size: 0.42rem;

    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================================
   DETAILS
========================================================= */

.transfer-modal-details {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;
}


.transfer-modal-details > div {
    padding: 13px;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.02);
}


.transfer-modal-details span {
    display: block;

    color: #68707b;

    font-size: 0.49rem;

    text-transform: uppercase;
}


.transfer-modal-details strong {
    display: block;

    margin-top: 3px;

    color: white;

    font-size: 0.7rem;
}


/* =========================================================
   FAVORIT
========================================================= */

.transfer-modal-favorite {
    margin-top: 14px;
}


.transfer-modal-favorite-box {
    padding: 11px 13px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 9px;

    border:
        1px solid var(--fan-color);

    background:
        rgba(255,255,255,0.025);

    color: white;

    font-size: 0.6rem;

    font-weight: 800;
}


/* =========================================================
   NOTE
========================================================= */

.transfer-modal-note {
    margin-top: 16px;

    padding: 11px 13px;

    display: flex;

    gap: 8px;

    border-radius: 8px;

    border:
        1px solid rgba(255,255,255,0.05);

    background:
        rgba(255,255,255,0.018);

    color: #676f7b;

    font-size: 0.53rem;

    line-height: 1.5;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .transfer-modal-box {
        padding:
            22px 15px;
    }


    .transfer-modal-route {
        grid-template-columns:
            1fr;

        padding:
            18px 12px;
    }


    .transfer-modal-arrow {
        transform:
            rotate(90deg);
    }


    .transfer-modal-arrow small {
        display: none;
    }


    .transfer-modal-details {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   SCHRITT 20
   TRANSFER TICKER
========================================================= */

.transfer-ticker {
    margin-bottom: 15px;

    overflow: hidden;

    border-radius: 13px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        linear-gradient(
            145deg,
            #141820,
            #0e1117
        );
}


/* =========================================================
   HEADER
========================================================= */

.transfer-ticker-header {
    padding:
        12px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}


.transfer-ticker-header > div {
    display: flex;

    align-items: center;

    gap: 12px;
}


.transfer-ticker-live {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #e76e74;

    font-size: 0.48rem;

    font-weight: 900;

    letter-spacing: 1px;
}


.transfer-ticker-live i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #e30613;

    box-shadow:
        0 0 12px
        rgba(227,6,19,0.8);

    animation:
        transferTickerPulse
        1.5s ease-in-out
        infinite;
}


@keyframes transferTickerPulse {

    0%,
    100% {
        opacity: 1;

        transform:
            scale(1);
    }

    50% {
        opacity: 0.45;

        transform:
            scale(0.75);
    }

}


.transfer-ticker-header strong {
    color: white;

    font-size: 0.68rem;
}


.transfer-ticker-hint {
    color: #626a75;

    font-size: 0.46rem;

    text-transform: uppercase;
}


/* =========================================================
   TICKER WINDOW
========================================================= */

.transfer-ticker-window {
    position: relative;

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,0.12)
        transparent;
}


.transfer-ticker-window::-webkit-scrollbar {
    height: 5px;
}


.transfer-ticker-window::-webkit-scrollbar-track {
    background: transparent;
}


.transfer-ticker-window::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        rgba(255,255,255,0.12);
}


.transfer-ticker-track {
    min-width: max-content;

    padding:
        12px;

    display: flex;

    gap: 9px;
}


/* =========================================================
   TICKER ITEM
========================================================= */

.transfer-ticker-item {
    --ticker-color: #e30613;

    position: relative;

    width: 255px;

    min-height: 90px;

    padding:
        11px 12px;

    overflow: hidden;

    flex-shrink: 0;

    border-radius: 9px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.022);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.transfer-ticker-item:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,0.14);

    background:
        rgba(255,255,255,0.04);
}


.transfer-ticker-item:focus-visible {
    outline:
        2px solid var(--ticker-color);

    outline-offset: 2px;
}


.transfer-ticker-item.favorite {
    border-color:
        var(--ticker-color);

    box-shadow:
        inset 0 0 25px
        color-mix(
            in srgb,
            var(--ticker-color) 7%,
            transparent
        );
}


.transfer-ticker-item.favorite::after {
    content: "⭐ DEIN VEREIN";

    position: absolute;

    right: 0;
    bottom: 0;

    padding:
        3px 6px;

    border-radius:
        6px 0 0 0;

    background:
        var(--ticker-color);

    color: white;

    font-size: 0.37rem;

    font-weight: 900;

    letter-spacing: 0.5px;
}


/* =========================================================
   ITEM TOP
========================================================= */

.transfer-ticker-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.transfer-ticker-player {
    overflow: hidden;

    color: white;

    font-size: 0.62rem;

    font-weight: 900;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.transfer-ticker-status {
    flex-shrink: 0;

    font-size: 0.42rem;

    font-weight: 900;
}


.transfer-ticker-status.confirmed {
    color: #62d58e;
}


.transfer-ticker-status.rumor {
    color: #efc85d;
}


/* =========================================================
   VEREINE
========================================================= */

.transfer-ticker-route {
    margin-top: 8px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 7px;
}


.transfer-ticker-club {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 6px;
}


.transfer-ticker-club:last-child {
    justify-content: flex-end;

    text-align: right;
}


.transfer-ticker-logo {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    display: grid;

    place-items: center;
}


.transfer-ticker-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.transfer-ticker-logo span {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color: white;

    font-size: 0.35rem;

    font-weight: 900;
}


.transfer-ticker-club strong {
    overflow: hidden;

    color: #8f97a3;

    font-size: 0.46rem;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.transfer-ticker-arrow {
    color: var(--ticker-color);

    font-size: 0.75rem;

    font-weight: 900;
}


/* =========================================================
   BOTTOM
========================================================= */

.transfer-ticker-bottom {
    margin-top: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    color: #606874;

    font-size: 0.42rem;
}


.transfer-ticker-fee {
    color: #aeb4bd;

    font-weight: 800;
}


/* =========================================================
   EMPTY
========================================================= */

.transfer-ticker-empty {
    width: 100%;

    padding: 17px;

    color: #68707b;

    text-align: center;

    font-size: 0.58rem;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .transfer-ticker-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .transfer-ticker-header > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 3px;
    }


    .transfer-ticker-item {
        width: 230px;
    }

}