@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&display=swap");


:root {
    --bg: #050505;
    --panel: rgba(11,11,11,.92);
    --panel2: #101010;
    --text: #f1f1f1;
    --muted: #9b9b9b;
    --line: rgba(255,255,255,.26);
    --line2: rgba(255,255,255,.48);
    --green: #284b35;
    --head: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --ui: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
    --nav: "Oswald", "Arial Narrow", sans-serif;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    background: #020202;
}


body {
    margin: 0;
    min-width: 320px;
    background: #020202;
    position: relative;
    color: var(--text);
    font-family: var(--ui);
    font-size: 13px;
    letter-spacing: .01em;
    overflow-x: hidden;
}


/* =========================================================
   GLOBAL WEBSITE BACKGROUND
   website-background.webp ersetzt gleichzeitig den bisherigen
   Stadion-/Hero-Hintergrund und läuft hinter der ganzen Seite.
========================================================= */

.site-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;

    background-color: #020202;
    background-image: url('../assets/backgrounds/website-background.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    filter: brightness(1.02) contrast(1.04);
}

.site-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Nur eine sehr leichte Abdunklung für bessere Lesbarkeit. */
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.03) 38%,
            rgba(0,0,0,.08) 68%,
            rgba(0,0,0,.22) 100%
        );
}


header,
main,
footer {
    position: relative;
    z-index: 1;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    max-width: 100%;
}


.shell {
    width: min( 960px, calc(100% - 30px) );
    margin-inline: auto;
}


.panel-cut {
    position: relative;
    background: linear-gradient( 180deg, rgba(15,15,15,.94), rgba(6,6,6,.96) );
    border: 1px solid var(--line);
    clip-path: polygon( 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px );
}



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


.topbar {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 62px;
    transition: .25s;
}


    .topbar.sticky {
        position: fixed;
        background: rgba(2,2,2,.83);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255,255,255,.12);
    }


/*
    Das komplette Header-Innere.
    Wichtig: position:relative erlaubt uns,
    Logo, Navigation und Social Icons unabhängig
    voneinander zu positionieren.
*/

.nav-wrap {
    position: relative;
    height: 62px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
}



/* =========================================================
   LOGO LINKS
========================================================= */


.brand {
    position: absolute;
    left: 0;
    top: 7px;
    width: 50px;
    height: 50px;
    margin: 0;
    z-index: 3;
    filter: drop-shadow( 0 2px 3px #000 );
}


    .brand img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }



/* =========================================================
   NAVIGATION EXAKT MITTIG
========================================================= */


/*
    Nicht mehr margin-left benutzen.

    left:50% + translateX(-50%)
    sorgt dafür, dass die Navigation
    exakt in der Mitte der Website sitzt.
*/

.main-nav {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 62px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    white-space: nowrap;
}


    .main-nav a {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        font-family: var(--nav);
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .075em;
        color: #e8e8e8;
        text-transform: uppercase;
        text-shadow: 0 1px 2px rgba(0,0,0,.9);
    }



/* =========================================================
   SOCIAL MEDIA ICONS RECHTS
========================================================= */

.socials {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    height: 62px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    z-index: 10;
    transform: none;
}


    .socials a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d8d8d8;
        font-size: 16px;
        opacity: .82;
        transition: opacity .2s ease, color .2s ease, transform .2s ease;
    }


        .socials a:hover {
            opacity: 1;
            color: #fff;
            transform: translateY(-1px);
        }


    .socials i {
        display: block;
    }



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */


.nav-toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 10px;
    z-index: 6;
    cursor: pointer;
}


    .nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        margin: 5px 0;
    }



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


.hero {
    height: 454px;
    position: relative;
    overflow: hidden;
    padding-top: 70px;
    background: transparent;
}

/* Diese Elemente sind bereits im neuen globalen Hintergrund enthalten. */
.hero-lights,
.hero-banner,
.hero-trio,
.hero-smoke {
    display: none !important;
}


.hero-lights {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 33px;
    width: 100%;
    height: 220px;
    object-fit: cover;
    opacity: .34;
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 18%, #000 75%, transparent 100% );
    mask-image: linear-gradient( to bottom, transparent 0, #000 18%, #000 75%, transparent 100% );
}


.hero-inner {
    text-align: center;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* =========================================================
   HERO TITLE PNG
========================================================= */


.hero-title-image {
    display: block;
    width: 650px;
    max-width: 72vw;
    height: auto;
    margin: 4px auto 0;
    object-fit: contain;
    filter: drop-shadow( 0 3px 3px rgba(0,0,0,.8) ) drop-shadow( 0 8px 15px rgba(0,0,0,.35) );
    user-select: none;
    pointer-events: none;
}


/*
    Falls irgendwo doch noch der alte
    HTML-Text existiert, wird er versteckt.
*/

.hero h1,
.hero-subtitle,
.hero-tagline {
    display: none;
}



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


.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
}


.image-button {
    display: block;
    transition: transform .2s, filter .2s;
    filter: drop-shadow( 0 3px 4px #000 );
}


    .image-button img {
        width: 100%;
        height: auto;
    }


    .image-button:hover {
        transform: translateY(-2px);
        filter: brightness(1.14) drop-shadow( 0 4px 6px #000 );
    }


    .image-button:active {
        transform: translateY(1px) scale(.99);
    }


    .image-button.apply {
        width: 245px;
    }


    .image-button.team {
        width: 190px;
    }



/* =========================================================
   HERO BANNER
========================================================= */


.hero-banner {
    position: absolute;
    z-index: 2;
    top: 142px;
    width: 105px;
    height: 174px;
    object-fit: contain;
    opacity: .6;
    filter: brightness(.72);
}


.hero-banner-left {
    left: 58px;
}


.hero-banner-right {
    right: 58px;
    transform: scaleX(-1);
}



/* =========================================================
   HERO TRIO
========================================================= */


.hero-trio {
    position: absolute;
    z-index: 3;
    width: 420px;
    height: 200px;
    object-fit: contain;
    left: 50%;
    bottom: -42px;
    transform: translateX(-50%);
    filter: brightness(.58) contrast(1.08) drop-shadow( 0 0 8px #000 );
    -webkit-mask-image: radial-gradient( ellipse 72% 76% at 50% 58%, #000 48%, transparent 100% );
    mask-image: radial-gradient( ellipse 72% 76% at 50% 58%, #000 48%, transparent 100% );
}



/* =========================================================
   HERO SMOKE
========================================================= */


.hero-smoke {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -32px;
    width: 940px;
    height: 180px;
    object-fit: contain;
    transform: translateX(-50%);
    opacity: .54;
    mix-blend-mode: screen;
    animation: drift 16s ease-in-out infinite alternate;
}


@keyframes drift {

    to {
        transform: translateX(-48%) scale(1.03);
    }
}



/* =========================================================
   TEAM
========================================================= */


.team-section {
    height: 212px;
    position: relative;
    z-index: 6;
}


.section-title-row {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
}


    .section-title-row h2,
    .panel-heading h2,
    .recruit h2,
    .community h2 {
        font: 900 24px/1 var(--head);
        letter-spacing: .025em;
        margin: 0;
    }


.mini-link,
.panel-heading > a {
    border: 1px solid rgba(255,255,255,.3);
    height: 22px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font: 600 10px/1 var(--ui);
    letter-spacing: .04em;
    color: #ddd;
}


.team-carousel-wrap {
    position: relative;
}


.team-carousel {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 15px;
    overflow: hidden;
}


.carousel-arrow {
    position: absolute;
    top: 64px;
    border: 0;
    background: transparent;
    color: #cfcfcf;
    font: bold 30px/1 var(--head);
    z-index: 3;
    opacity: .72;
    cursor: pointer;
}


    .carousel-arrow.left {
        left: -34px;
    }


    .carousel-arrow.right {
        right: -34px;
    }



/* =========================================================
   PLAYER CARD
========================================================= */


/* =========================================================
   PLAYER CARD
========================================================= */

.player-card {
    height: 160px;
    position: relative;
    padding: 8px 10px 7px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(255,255,255,.36);
    clip-path: polygon( 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px );
    transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}


    /* CARD BACKGROUND IMAGE */
    .player-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient( to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.24) 100% ), url('../assets/players/card-background.webp') center center / cover no-repeat;
        opacity: 1;
        pointer-events: none;
    }


    /* EXTRA DARK / METALLIC OVERLAY */
    .player-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient( ellipse at 50% 28%, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 28%, transparent 60% ), linear-gradient( to bottom, transparent 45%, rgba(0,0,0,.05) 65%, rgba(0,0,0,.22) 100% );
    }


    .player-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,.65);
        filter: brightness(1.06);
    }


/* POSITION + OVR */
.player-top {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    font: bold 13px/1 var(--ui);
}


    .player-top .ovr {
        font-size: 21px;
    }


/* PLAYER PNG */
.player-art {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: 155px;
    height: 132px;
    object-fit: contain;
    filter: brightness(.88) contrast(1.08) drop-shadow(0 3px 4px rgba(0,0,0,.85));
}


/* PLAYER NAME */
.player-name {
    position: absolute;
    z-index: 4;
    left: 6px;
    right: 6px;
    top: 90px;
    text-align: center;
    font: 900 17px/1 var(--head);
    letter-spacing: .025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 3px #000;
}


/* PLAYER ROLE */
.player-role {
    position: absolute;
    z-index: 4;
    left: 6px;
    right: 6px;
    top: 108px;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    color: #c6c6c6;
    letter-spacing: .06em;
    text-shadow: 0 1px 2px #000;
}


/* STATS */
.player-stats {
    position: absolute;
    z-index: 4;
    left: 9px;
    right: 9px;
    bottom: 7px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 3px;
    text-align: center;
}


.player-stat b {
    display: block;
    font-size: 6px;
    color: #9b9b9b;
    text-shadow: 0 1px 2px #000;
}


.player-stat span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}



/* =========================================================
   MATCH OVERVIEW
========================================================= */


.match-overview {
    height: 171px;
    display: grid;
    grid-template-columns: 1.45fr 1fr .56fr;
    margin-top: 4px;
    overflow: hidden;
}


.overview-col {
    min-width: 0;
    padding: 9px 13px;
}


    .overview-col + .overview-col {
        border-left: 1px solid rgba(255,255,255,.19);
    }


.panel-heading {
    height: 26px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}


    .panel-heading h2 {
        font-size: 24px;
    }


    .panel-heading > a {
        height: 20px;
        padding: 0 8px;
        margin-top: -1px;
    }


.match-list {
    margin-top: 1px;
}


.match-row {
    height: 39px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: grid;
    grid-template-columns: 1.4fr .55fr 1.15fr;
    align-items: center;
    font-size: 9px;
}


.club-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}


.mini-crest {
    width: 25px;
    height: 25px;
    object-fit: contain;
}


.score {
    text-align: center;
    font: 900 23px/1 var(--head);
}


    .score small {
        display: block;
        margin-top: 2px;
        font: 600 6px/1 var(--ui);
        color: #777;
        letter-spacing: .08em;
    }


.opponent {
    text-align: right;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* =========================================================
   TABLE
========================================================= */


.standings-head,
.standing-row {
    display: grid;
    grid-template-columns: 20px 1fr repeat(5,28px);
    align-items: center;
}


.standings-head {
    height: 21px;
    color: #8d8d8d;
    font-size: 7px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}


.standing-row {
    height: 22px;
    font-size: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


    .standing-row.active {
        background: linear-gradient( 90deg, rgba(37,65,45,.42), transparent 78% );
    }


    .standing-row strong {
        font-size: 9px;
    }


    .standing-row.muted {
        color: #a4a4a4;
    }



/* =========================================================
   FORM
========================================================= */


.form-panel {
    padding-left: 15px;
}


.form-badges {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}


    .form-badges span {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #16271c;
        border: 1px solid #33553e;
        font: bold 10px/1 var(--ui);
    }


        .form-badges span.draw {
            background: #222;
            border-color: #555;
        }


        .form-badges span.loss {
            background: #2b1717;
            border-color: #593434;
        }


.form-panel small {
    display: block;
    color: #777;
    font-size: 7px;
    margin-top: 21px;
    letter-spacing: .08em;
}



/* =========================================================
   NEWS
========================================================= */


.news-section {
    height: 159px;
    margin-top: 16px;
    padding: 10px 12px;
}


    .news-section > .panel-heading {
        height: 31px;
    }


.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}


.news-card {
    height: 103px;
    border: 1px solid rgba(255,255,255,.3);
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    position: relative;
    background: #080808;
}


    .news-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.05) brightness(.75);
    }


.news-copy {
    padding: 8px 8px 6px;
}


.news-meta {
    font-size: 6px;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 4px;
}


.news-copy h3 {
    font: 900 17px/.98 var(--head);
    letter-spacing: .015em;
    margin: 0 0 5px;
}


.news-copy p {
    font-size: 7px;
    color: #aaa;
    line-height: 1.35;
    margin: 0 0 3px;
}


.news-arrow {
    position: absolute;
    right: 7px;
    bottom: 5px;
    font-size: 21px;
    color: #aaa;
}



/* =========================================================
   RECRUITMENT + COMMUNITY
========================================================= */


.recruit-community {
    height: 184px;
    margin-top: 15px;
    display: grid;
    grid-template-columns: 2.05fr 1fr;
    gap: 15px;
}


.recruit,
.community {
    height: 174px;
    overflow: hidden;
}


.recruit {
    position: relative;
    padding: 12px 18px;
    overflow: hidden;
    background-color: #080808;
    background-image: linear-gradient( to right, rgba(5,5,5,1) 0%, rgba(5,5,5,.96) 30%, rgba(5,5,5,.78) 47%, rgba(5,5,5,.30) 67%, rgba(5,5,5,.05) 100% ), url('../assets/effects/recruit-hoodie.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: 100% 100%, auto 100%;
}


.recruit-copy {
    position: relative;
    z-index: 4;
    width: 64%;
    text-shadow: 0 2px 3px rgba(0,0,0,.85);
}


.recruit h2,
.community h2 {
    font-size: 25px;
}


.recruit p {
    font-size: 9px;
    line-height: 1.35;
    color: #bbb;
    margin: 7px 0;
}


.recruit ul {
    list-style: none;
    margin: 5px 0 3px;
    padding: 0;
    font-size: 8px;
    line-height: 1.55;
    color: #d0d0d0;
}


.recruit li:before {
    content: "✓";
    margin-right: 7px;
}


.recruit-button {
    width: 204px;
    margin-top: 5px;
}


.recruit-watermark {
    position: absolute;
    z-index: 1;
    right: -20px;
    bottom: -60px;
    width: 280px;
    opacity: .02;
    pointer-events: none;
}


.community {
    padding: 13px 18px;
    position: relative;
}


    .community h3 {
        font: 900 19px/1 var(--head);
        margin: 11px 0 7px;
    }


    .community p {
        font-size: 9px;
        line-height: 1.45;
        color: #bcbcbc;
        width: 61%;
        margin: 0;
    }


.discord-logo {
    position: absolute;
    right: 32px;
    top: 50px;
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e5e5;
    font-size: 62px;
    opacity: .95;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.75));
}

    .discord-logo i {
        display: block;
    }


.discord-button {
    display: grid;
    place-items: center;
    position: absolute;
    left: 18px;
    bottom: 16px;
    width: 154px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.55);
    clip-path: polygon( 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px );
    font: 900 14px/1 var(--head);
    background: linear-gradient( 110deg, #171717, #080808 );
    transition: .2s;
}


    .discord-button:hover {
        background: #1c1c1c;
        transform: translateY(-2px);
    }



/* =========================================================
   PARTNERS
========================================================= */


.partners {
    min-height: 72px;
    height: auto;
}


.partners-label {
    height: 22px;
    font: bold 9px/1 var(--ui);
    display: flex;
    align-items: flex-end;
    padding: 0 5px 5px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}


.partner-row {
    min-height: 49px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    align-items: stretch;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.partner-row .partner-item {
    min-width: 0;
    min-height: 49px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,.13);
    color: #d0d0d0;
    transition: background .2s ease, opacity .2s ease;
}

.partner-row .partner-item:nth-child(6n) {
    border-right: 0;
}

.partner-row a.partner-item:hover {
    background: rgba(255,255,255,.035);
}

.partner-row .partner-text {
    border: 0;
    font-size: 11px;
    letter-spacing: .08em;
    color: #d0d0d0;
    line-height: 1.05;
}

.partner-row .partner-text b {
    font-size: 8px;
    font-weight: 600;
}

.partner-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 112px;
    max-height: 29px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1) brightness(1.28);
    opacity: .94;
}

.partner-row a:hover .partner-logo {
    opacity: 1;
    filter: grayscale(1) brightness(1.45);
}



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


.footer {
    height: 117px;
    margin-bottom: 0;
    padding: 12px 18px 22px;
    display: grid;
    grid-template-columns: 2fr 1.05fr 1.05fr 1.1fr;
    gap: 14px;
    overflow: hidden;
}


.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


    .footer-brand img {
        width: 74px;
        height: 74px;
        object-fit: contain;
    }


    .footer-brand div {
        display: flex;
        flex-direction: column;
    }


    .footer-brand strong {
        font: 900 24px/1 var(--head);
    }


    .footer-brand span {
        font: bold 12px/1.3 var(--ui);
    }


    .footer-brand small {
        font-size: 6px;
        color: #aaa;
        margin-top: 5px;
        letter-spacing: .08em;
    }


.footer-links {
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    font-size: 7px;
    line-height: 1.55;
    color: #c0c0c0;
}


    .footer-links h4 {
        margin: 2px 0 4px;
        font: bold 8px/1 var(--ui);
        color: #fff;
    }


.footer-bottom {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 5px;
    color: #686868;
    letter-spacing: .15em;
}



/* =========================================================
   SUBPAGES
========================================================= */


.subpage {
    padding-top: 90px;
    min-height: 100vh;
}


    .subpage .subhero {
        min-height: 130px;
        padding: 25px 0;
        border-bottom: 1px solid rgba(255,255,255,.13);
    }


.subhero h1 {
    font: 900 58px/.95 var(--head);
    margin: 0;
}


.subhero p {
    color: #aaa;
    margin-top: 8px;
    max-width: 600px;
}


.content-panel {
    margin: 20px auto;
    padding: 18px;
    min-height: 300px;
}


.content-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}


.detail-card {
    border: 1px solid var(--line);
    background: #090909;
    padding: 14px;
}


    .detail-card h3 {
        font: 900 23px/1 var(--head);
        margin: 0 0 8px;
    }


    .detail-card p {
        color: #aaa;
    }



/* =========================================================
   APPLICATION FORM
========================================================= */


.apply-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


    .apply-form label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 10px;
        font-weight: 700;
    }


    .apply-form input,
    .apply-form select,
    .apply-form textarea {
        background: #080808;
        border: 1px solid #333;
        color: #eee;
        padding: 11px 12px;
        font: inherit;
    }


    .apply-form textarea {
        min-height: 110px;
        resize: vertical;
    }


    .apply-form .full {
        grid-column: 1/-1;
    }


.submit {
    background: #e4e4e4;
    color: #111;
    border: 0;
    padding: 12px 18px;
    font: 900 18px/1 var(--head);
    cursor: pointer;
}


.form-status {
    grid-column: 1/-1;
    color: #bbb;
    font-size: 10px;
}



/* =========================================================
   ROSTER DETAILS
========================================================= */


.roster-detail {
    display: grid;
    grid-template-columns: 120px 1fr;
    min-height: 190px;
    gap: 12px;
    overflow: hidden;
}


    .roster-detail > img {
        width: 120px;
        height: 160px;
        object-fit: contain;
        filter: brightness(.75);
    }


    .roster-detail h3 {
        font-size: 25px;
    }


    .roster-detail p {
        font-size: 9px;
        margin: 2px 0 10px;
    }


    .roster-detail dl {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 6px;
        margin: 0;
    }


        .roster-detail dl div {
            border: 1px solid #242424;
            padding: 6px;
            text-align: center;
        }


    .roster-detail dt {
        font-size: 7px;
        color: #777;
    }


    .roster-detail dd {
        font: 900 18px/1 var(--head);
        margin: 3px 0 0;
    }



/* =========================================================
   RESULTS
========================================================= */


.results-list {
    display: flex;
    flex-direction: column;
}


.result-big {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    min-height: 78px;
    border-bottom: 1px solid #242424;
}


    .result-big > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }


    .result-big img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }


    .result-big > b {
        text-align: center;
        font: 900 31px/1 var(--head);
    }


    .result-big .away {
        justify-content: flex-end;
    }



/* =========================================================
   ARTICLES
========================================================= */


.wide-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    filter: grayscale(1);
}


.article-view {
    max-width: 760px;
    margin: auto;
}


    .article-view > img {
        width: 100%;
        max-height: 360px;
        object-fit: cover;
        filter: grayscale(1);
        margin-bottom: 16px;
    }


    .article-view h2 {
        font: 900 40px/1 var(--head);
        margin: 6px 0 12px;
    }


    .article-view h3 {
        font: 900 22px/1 var(--head);
        margin-top: 24px;
    }


    .article-view p {
        font-size: 12px;
        line-height: 1.7;
        color: #bbb;
    }


    .article-view blockquote {
        margin: 14px 0;
        padding: 16px;
        border-left: 2px solid #ddd;
        background: #0b0b0b;
        font: 900 28px/1.1 var(--head);
    }


.empty {
    color: #999;
    padding: 30px;
    text-align: center;
}



/* =========================================================
   RESPONSIVE <= 1000px
========================================================= */


@media(max-width:1000px) {


    .nav-wrap {
        max-width: calc(100% - 30px);
    }


    /*
        Navigation bleibt auch hier mittig.
        Kein margin-left mehr.
    */

    .main-nav {
        gap: 20px;
        margin: 0;
    }


    .socials {
        gap: 13px;
        right: 0;
    }


    .brand {
        left: 0;
    }


    .hero-banner {
        display: none;
    }


    .carousel-arrow {
        display: none;
    }


    .team-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: flex;
        padding-bottom: 4px;
    }


    .player-card {
        flex: 0 0 174px;
        scroll-snap-align: start;
    }


    .shell {
        width: min( 930px, calc(100% - 28px) );
    }
}



/* =========================================================
   TABLET / MOBILE <= 780px
========================================================= */


@media(max-width:780px) {


    .topbar,
    .nav-wrap {
        height: 58px;
    }


    .nav-wrap {
        max-width: calc(100% - 20px);
    }



    /* LOGO */


    .brand {
        position: absolute;
        left: 0;
        top: 5px;
        width: 54px;
        height: 50px;
    }


        .brand img {
            width: 50px;
            height: 50px;
        }



    /* HAMBURGER */


    .nav-toggle {
        display: block;
        position: absolute;
        right: 0;
        top: 7px;
        margin: 0;
    }



    /*
        Mobile Navigation:

        Desktop left:50% und transform müssen
        hier komplett zurückgesetzt werden.
    */


    .main-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 58px;
        transform: none;
        background: rgba(0,0,0,.96);
        padding: 18px 22px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #333;
    }


        .main-nav.open {
            display: flex;
        }


        .main-nav a {
            height: 38px;
            width: 100%;
        }


            .main-nav a.active:after {
                bottom: 2px;
                right: auto;
                width: 35px;
            }


    .socials {
        display: none;
    }



    /* HERO */


    .hero {
        height: 415px;
        padding-top: 76px;
    }


    .hero-title-image {
        width: 520px;
        max-width: 88vw;
        margin-top: 2px;
    }


    .hero-actions {
        gap: 8px;
        margin-top: 10px;
    }


    .image-button.apply {
        width: 205px;
    }


    .image-button.team {
        width: 160px;
    }


    .hero-trio {
        width: 310px;
    }



    /* TEAM */


    .team-section {
        height: 202px;
    }



    /* MATCHES */


    .match-overview {
        height: auto;
        display: block;
        clip-path: none;
    }


    .overview-col + .overview-col {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.18);
    }


    .results-panel {
        min-height: 165px;
    }


    .table-panel {
        min-height: 160px;
    }


    .form-panel {
        min-height: 110px;
    }



    /* NEWS */


    .news-section {
        height: auto;
    }


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


    .news-card {
        height: 110px;
    }



    /* RECRUITMENT */


    .recruit-community {
        height: auto;
        grid-template-columns: 1fr;
    }


    .recruit,
    .community {
        height: 185px;
    }



    /* PARTNERS */


    .partners {
        height: auto;
    }


    .partner-row {
        grid-template-columns: repeat(3,1fr);
        height: auto;
    }


        .partner-row span {
            min-height: 43px;
            display: grid;
            place-items: center;
            border-bottom: 1px solid rgba(255,255,255,.1);
        }

    .partner-row .partner-item {
        min-height: 48px;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .partner-logo {
        max-width: 105px;
        max-height: 28px;
    }



    /* FOOTER */


    .footer {
        height: auto;
        min-height: 265px;
        grid-template-columns: 1fr 1fr;
    }


    .footer-brand {
        grid-column: 1/-1;
    }


    .footer-bottom {
        position: static;
        grid-column: 1/-1;
        margin-top: 8px;
        gap: 15px;
    }



    /* SUBPAGES */


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


    .apply-form {
        grid-template-columns: 1fr;
    }


        .apply-form .full {
            grid-column: auto;
        }
}



/* =========================================================
   SMALL MOBILE <= 480px
========================================================= */


@media(max-width:480px) {


    .shell {
        width: calc(100% - 20px);
    }



    /* LOGO */


    .brand {
        width: 50px;
        top: 5px;
    }


        .brand img {
            width: 47px;
            height: 47px;
        }



    /* HERO */


    .hero {
        height: 390px;
        padding-top: 70px;
    }


    .hero-title-image {
        width: 94vw;
        max-width: 430px;
        margin-top: 5px;
    }


    .hero-actions {
        flex-direction: column;
        gap: 0;
        margin-top: 10px;
    }


    .image-button.apply {
        width: 188px;
    }


    .image-button.team {
        width: 170px;
        margin-top: -8px;
    }


    .hero-trio {
        width: 270px;
        bottom: -6px;
    }



    /* TEAM */


    .team-section {
        height: 204px;
    }


    .section-title-row h2,
    .panel-heading h2 {
        font-size: 22px;
    }



    /* RECRUITMENT */


    .recruit-copy {
        width: 78%;
    }


    .recruit-figure {
        right: -20px;
        opacity: .35;
    }



    /* COMMUNITY */


    .community p {
        width: 65%;
    }



    /* FOOTER */


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


    .footer-links {
        border-left: 0;
        border-top: 1px solid #222;
        padding: 8px 0;
    }


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


    .subhero h1 {
        font-size: 46px;
    }
}




@media(max-width:780px) {
    .site-bg {
        background-size: auto 780px;
        background-position: center top;
    }
}

@media(max-width:480px) {
    .site-bg {
        background-size: auto 650px;
        background-position: center top;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */


@media(prefers-reduced-motion:reduce) {


    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   DESKTOP SCALE / 175% LOOK AT 100% BROWSER ZOOM
   ---------------------------------------------------------
   Auf großen Desktop-Auflösungen wird die komplette Website
   bewusst vergrößert, damit sie bei 100% Browser-Zoom ungefähr
   so wirkt wie vorher bei 175% Browser-Zoom.

   Mobile/Tablet bleiben unverändert.
========================================================= */

@media (min-width:1800px) {
    body {
        zoom: 1.75;
    }
}

@media (min-width:1600px) and (max-width:1799px) {
    body {
        zoom: 1.55;
    }
}

@media (min-width:1400px) and (max-width:1599px) {
    body {
        zoom: 1.35;
    }
}

@media (min-width:1200px) and (max-width:1399px) {
    body {
        zoom: 1.18;
    }
}


/* =========================================================
   GLOBAL NAV / SOCIAL REFINEMENTS
========================================================= */

.socials a {
    width: 18px;
    height: 18px;
    font-size: 14px;
}

.socials i {
    line-height: 1;
}

.partner-row a {
    min-height: 100%;
    display: grid;
    place-items: center;
    font-size: 11px;
    letter-spacing: .08em;
    color: #d0d0d0;
    border-right: 1px solid rgba(255,255,255,.13);
    line-height: 1.05;
}

.partner-row a:last-child {
    border-right: 0;
}

/* =========================================================
   SECRET ADMIN LOGIN - CONTACT PAGE ONLY
========================================================= */

.admin-secret-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: default;
    opacity: 1;
}

body[data-page="contact"] .admin-secret-trigger {
    cursor: pointer;
}

body[data-page="contact"] .admin-secret-trigger:hover {
    color: #bdbdbd;
}

.admin-login-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.admin-login-modal[hidden] {
    display: none;
}

.admin-login-dialog {
    position: relative;
    width: min(390px, 94vw);
    padding: 28px 30px 30px;
    background:
        linear-gradient(180deg,rgba(18,18,18,.98),rgba(5,5,5,.99));
    border: 1px solid rgba(255,255,255,.34);
    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
    box-shadow: 0 24px 80px rgba(0,0,0,.85);
    text-align: center;
}

.admin-login-dialog > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 12px;
}

.admin-login-kicker {
    display: block;
    color: #777;
    font-size: 8px;
    letter-spacing: .23em;
}

.admin-login-dialog h2 {
    margin: 4px 0 5px;
    font: 900 30px/1 var(--head);
}

.admin-login-dialog > p {
    margin: 0 0 18px;
    color: #888;
    font-size: 10px;
}

.admin-login-dialog label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #aaa;
}

.admin-login-dialog input {
    width: 100%;
    height: 42px;
    border: 1px solid #343434;
    background: #050505;
    color: #fff;
    padding: 0 12px;
    font: 500 13px/1 var(--ui);
    outline: none;
}

.admin-login-dialog input:focus {
    border-color: #888;
}

.admin-login-dialog form > button {
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: 1px solid #eee;
    background: #e9e9e9;
    color: #080808;
    font: 900 15px/1 var(--head);
    cursor: pointer;
}

.admin-login-close {
    position: absolute;
    right: 10px;
    top: 7px;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 24px;
    cursor: pointer;
}

.admin-login-status {
    min-height: 15px;
    margin-top: 10px;
    color: #d99797;
    font-size: 9px;
}

body.admin-modal-open {
    overflow: hidden;
}

.main-nav a:hover,
.main-nav a.active {
    color: #fff;
}

@media(min-width:781px) {
    .main-nav a.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        height: 1px;
        background: #fff;
    }
}


/* =========================================================
   FINAL HEADER / SOCIAL POSITION FIX
   Desktop: logo left, navigation centered, socials right
========================================================= */

@media (min-width: 781px) {

    .topbar .nav-wrap {
        position: relative;
    }

    .topbar .brand {
        position: absolute;
        left: 0;
        right: auto;
        top: 7px;
        margin: 0;
        z-index: 20;
    }

    .topbar .main-nav {
        position: absolute;
        left: 50%;
        right: auto;
        top: 0;
        transform: translateX(-50%);
        margin: 0;
        z-index: 15;
    }

    .topbar .socials {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        width: auto !important;
        height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 18px !important;
        transform: none !important;
        z-index: 20 !important;
    }

    .topbar .socials a {
        position: static !important;
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* Mobile: socials hidden, hamburger stays on the right */
@media (max-width: 780px) {

    .topbar .socials {
        display: none !important;
    }

}