*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:#050505;color:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
strong{color:#e9a32d;font-weight:700}
.page{min-height:100vh;background:#050505;overflow:hidden}
.hero-wrap{min-height:100vh;position:relative;
    background:radial-gradient(circle at 68% 28%,rgba(242,159,33,.16) 0%,rgba(242,159,33,0) 24%),
        radial-gradient(circle at 28% 10%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 18%),
        linear-gradient(180deg,#090909 0%,#0a0a0a 48%,#060606 100%)}

.hero-wrap:before{content:"";position:absolute;
    top:120px;right:-220px;width:820px;height:820px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 0 90px rgba(255,255,255,.03),0 0 0 180px rgba(255,255,255,.025),0 0 0 270px rgba(255,255,255,.015);
    pointer-events:none}
.hero-wrap:after{content:"";position:absolute;inset:0;
        background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
            linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size:44px 44px;opacity:.2;pointer-events:none}
.container{width:100%;max-width:1280px;margin:0 auto;padding-left:28px;padding-right:28px;position:relative;z-index:2}
.hero{min-height:100vh;display:table;width:100%}
.hero-row{display:table-row}
.hero-copy,
.hero-visual{display:table-cell;vertical-align:middle}
.hero-copy{width:58%;padding-right:44px}
.hero-visual{width:42%;text-align:center}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    color:#d6a25b;border:1px solid rgba(214,162,91,.25);background:rgba(255,255,255,.04);
    padding:10px 16px;border-radius:999px;margin-bottom:30px}h1{font-size:138px;
        line-height:.92;font-weight:800;letter-spacing:-.04em;color:#f5efe2}
h1 span{color:#e89a1c}
.subheadline{margin-top:18px;font-size:34px;letter-spacing:.16em;color:#8d8d8d;font-weight:300}
.intro{max-width:820px;margin-top:34px;font-size:21px;line-height:1.9;color:#d0d0d0}
.intro-small{margin-top:18px;font-size:18px;color:#a9a9a9}.cta-wrap{margin-top:42px}
.cta{display:inline-block;padding:20px 38px;border-radius:18px;font-size:17px;
    font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    background:linear-gradient(135deg,#4e63ff 0%,#6d78ff 45%,#7a58ff 100%);
    box-shadow:0 0 42px rgba(95,99,255,.45)}
.cta:hover{box-shadow:0 0 54px rgba(95,99,255,.72)}
.cta-note{margin-top:14px;font-size:14px;color:#7d7d7d;letter-spacing:.06em}
.leaderbaord{display:inline-block;position:absolute;max-width:900px;padding:10px;
    border:1px solid rgba(232,154,28,.18);border-radius:32px;background:rgba(255,255,255,.04);
    box-shadow:0 0 80px rgba(232,154,28,.12)}
.leaderbaord:before{content:"";position:absolute;left:30px;right:30px;bottom:8px;height:58px;
    background:rgba(232,154,28,.20);filter:blur(34px);border-radius:999px;z-index:0}
.logo-image{position:relative;z-index:1;width:100%;max-width:430px;height:auto;display:block}
.features,
.seo-section,
.faq,
.discord,
.footer{position:relative;z-index:2;padding:86px 0;border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.42)}
.section-kicker{font-size:18px;text-transform:uppercase;letter-spacing:.22em;color:#e0ad57;font-weight:700}
h2{margin-top:14px;font-size:42px;line-height:1.2;font-weight:700;color:#fff;max-width:860px}
.feature-grid{margin-top:34px;width:100%;border-collapse:separate;border-spacing:20px 20px;margin-left:-20px}
.feature-grid td{width:33.333%;vertical-align:top}
.feature-card{min-height:292px;border:1px solid rgba(255,255,255,.08);border-radius:28px;
    background:rgba(255,255,255,.03);padding:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.feature-icon{width:52px;height:52px;border-radius:18px;background:rgba(232,154,28,.12);
    color:#f0b450;text-align:center;line-height:52px;font-size:24px;margin-bottom:20px}
h3{font-size:25px;font-weight:700;color:#fff}
.feature-card p,.seo-copy p,
.faq-item p,.discord p,
.footer p{margin-top:14px;color:#a9a9a9;font-size:18px;line-height:1.75}
.seo-copy{max-width:920px}
.faq-item{max-width:940px;margin-top:26px;padding:28px;border-radius:24px;
    border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.discord{text-align:center;
        background:radial-gradient(circle at center,rgba(95,99,255,.18) 0%,rgba(95,99,255,0) 36%),rgba(0,0,0,.65)}
.discord h2{max-width:none}
.discord .cta{margin-top:30px}
.footer{padding:34px 0;text-align:center}
.footer p{margin-top:0;font-size:15px;color:#777}@media screen and (max-width:1100px){
    .hero,.hero-row,.hero-copy,.hero-visual{display:block;width:100%}
    .hero{min-height:auto;padding-top:82px;padding-bottom:70px}
    .hero-copy{padding-right:0}.hero-visual{margin-top:52px}
    h1{font-size:96px}.subheadline{font-size:28px;letter-spacing:.1em}
    .intro{font-size:20px}.feature-grid,.feature-grid tbody,.feature-grid tr,
    .feature-grid td{display:block;width:100%;margin:0;border-spacing:0}
    .feature-grid td{margin-bottom:20px}}@media screen and (max-width:700px){
        .container{padding-left:18px;padding-right:18px}h1{font-size:68px}
        .subheadline{font-size:22px}.intro{font-size:18px;line-height:1.8}
        .cta{font-size:15px;padding:18px 22px}h2{font-size:32px}h3{font-size:22px}
        .feature-card p,.seo-copy p,.faq-item p,.discord p{font-size:17px}}

/* Leaderboard */
.headline-board {
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:#e0ad57;
    font-weight:700;
    margin: 24px auto !important;
    text-align: center;
}

.dart-leaderboard {
    width: min(900px, calc(100% - 32px));
    margin: 24px auto !important;
    font-family: 'Inter', sans-serif;
    background: #1e1e24;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
    color: #e0e0e0;

}

.dropdown-header {
    background: linear-gradient(135deg, #2c2f33 0%, #23272a 100%);
    padding: 24px;
    cursor: pointer;
    user-select: none;
    position: relative;
    text-align: center;
}
.dropdown-header h2 {
    margin: 0;
    width: 100%;
    text-align: center;
}

    .header-top10 { border-bottom: 3px solid #10B981; }
    .header-league { border-bottom: 3px solid #3498db; }

    .dart-leaderboard h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

   .dropdown-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #ffffff;
    transition: all 0.3s ease;
}

    .dart-leaderboard.active .dropdown-arrow {
   transform: translateY(-50%) rotate(180deg);
    }

    .dropdown-content {
        display: none;
        width: 100%;
    }

    .dart-leaderboard.active .dropdown-content {
        display: block;
    }

 .table-container {
    width: 100%;
    padding: 0 20px 20px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.dart-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    margin-top: 10px;
}

    .dart-table th {
        text-align: left;
        padding: 16px 12px;
        color: #8e9297;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        border-bottom: 2px solid #2f3136;
    }

    .dart-table td {
        padding: 16px 12px;
        font-size: 15px;
        border-bottom: 1px solid #2f3136;
        transition: background 0.2s ease;
    }

    .dart-table tbody tr:hover td {
        background: rgba(255,255,255,0.03);
    }

    .player-name {
        font-weight: 600;
        color: #ffffff;
    }

    .rank-badge {
        background: #2f3136;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 14px;
        color: #b9bbbe;
    }

    .rank-icon {
        font-size: 22px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    }
/* Smartphones */
    @media (max-width: 768px) {
        .dart-leaderboard {
            margin: 18px auto;
            border-radius: 14px;
        }

        .dropdown-header {
            padding: 18px;
        }

        .dart-leaderboard h2 {
            font-size: 18px;
            text-align: left;
        }

        .dart-table {
            min-width: 620px;
        }
    }
    .table-container {
        padding: 0 14px 18px 14px;
        overflow-x: scroll;
    
    }
.table-container::after {
        content: "← Tabelle seitlich wischen →";
        display: block;
        text-align: center;
        color: #8e9297;
        font-size: 12px;
        padding-top: 10px;
    }

    .dart-table {
        min-width: 760px;
    }

    .dart-table th,
    .dart-table td {
        white-space: nowrap;
    }