* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: #05070C;
    color: #EDEAFA;
}
/* Systemschrift nur für den Inhalt der Startseite -- Header und Footer behalten
   die Seitenschrift (Orbitron) aus base.css wie auf allen anderen Seiten */
.content { font-family: system-ui, sans-serif; }

.hero {
    position: relative;
    /* Füllt genau den Bildschirm unter der Kopfzeile, die nächste Sektion beginnt
       erst am unteren Rand (--header-height setzt scripts/header-height.js) */
    min-height: calc(100vh - var(--header-height, 88px));
    min-height: calc(100svh - var(--header-height, 88px));
    padding: 4rem 0 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #0A0E16 0%, #05070C 60%, #030408 100%);
}
.hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#hero-canvas { z-index: 1; }
#rain-canvas { z-index: 2; pointer-events: none; }

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}
.hero-content h1 {
    font-size: 4rem;
    letter-spacing: 0.05em;
    color: #EDEAFA;
}
.hero-content p {
    margin-top: 1rem;
    color: #9C93BD;
    font-size: 1.1rem;
    max-width: 32rem;
}
.hero-content .stats {
    margin-top: 3rem;
    display: flex;
    gap: 3rem;
    justify-content: center;
}
.hero-content .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #EDEAFA;
}
.hero-content .stat-label {
    font-size: 0.85rem;
    color: #9C93BD;
    margin-top: 0.25rem;
}

/* Liquid-Glass-Layer: ganz oben über der Hero-Szene (nicht über der
    ganzen Seite -- er kann nur spiegeln, was auf Canvas darunter liegt) */
#glass-canvas {
    z-index: 4;
    pointer-events: none;
}

.hero-logo {
    width: 600px;
    max-width: 100%;
    margin-bottom: 1rem;
}

.hero-content { padding: 0 16px; }
.hero-content p { margin-left: auto; margin-right: auto; }

/* Weicher Lichtschein hinter dem Logo, damit die Mitte nicht so flach wirkt */
.hero-glow {
    position: absolute;
    z-index: 0;
    width: 900px;
    height: 600px;
    max-width: 120vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    background:
        radial-gradient(closest-side, rgba(77, 33, 235, 0.28), transparent 70%),
        radial-gradient(closest-side at 35% 40%, rgba(182, 255, 0, 0.08), transparent 70%);
    pointer-events: none;
}

.scroll-hint {
    position: absolute;
    z-index: 3;
    bottom: 1.5rem;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    color: #9C93BD;
    animation: scroll-bounce 2s ease-in-out infinite;
}
.scroll-hint:hover { color: #B6FF00; }
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ------------------------------------- Hero-Layout + Info-Panel ------------------------------------- */

.hero-layout {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1300px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 4rem;
    align-items: center;
}

/* Ohne Premier-Daten nur Logo & Text, wieder zentriert */
.hero-layout--single {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.hero-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Glas-Karten, damit Blitz und Regen dahinter sichtbar bleiben */
.panel-card {
    background: rgba(19, 25, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(58, 47, 107, 0.7);
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.panel-label {
    font-family: 'Valorant', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #EDEAFA;
}
.panel-meta {
    font-size: 0.8rem;
    color: #9C93BD;
}

.live-dot {
    font-size: 0.75rem;
    color: #B6FF00;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.live-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B6FF00;
    box-shadow: 0 0 8px #B6FF00;
}

/* Premier */
.premier-card {
    border-color: rgba(77, 33, 235, 0.9);
    background:
        radial-gradient(ellipse at top right, rgba(77, 33, 235, 0.35), transparent 65%),
        rgba(19, 25, 36, 0.55);
}
.premier-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}
.premier-rank { display: flex; align-items: baseline; gap: 0.5rem; }
.premier-rank-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #EDEAFA;
}
.premier-rank-of { color: #9C93BD; font-size: 0.9rem; }
.premier-stats { display: flex; gap: 1.25rem; text-align: right; }
.premier-stats div { display: flex; flex-direction: column; }
.premier-stats strong { font-size: 1.15rem; }
.premier-stats span { font-size: 0.75rem; color: #9C93BD; }

/* Letzte Matches */
.match-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.match {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: rgba(5, 7, 12, 0.45);
    border-left: 3px solid transparent;
}
.match-win { border-left-color: #B6FF00; }
.match-loss { border-left-color: #E6304C; }
.match-result {
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
}
.match-win .match-result { color: #B6FF00; }
.match-loss .match-result { color: #FF5C72; }
.match-opponent { font-size: 0.9rem; line-height: 1.2; }
.match-opponent small { display: block; font-size: 0.72rem; color: #9C93BD; }
.match-score { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
    .hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
        justify-items: center;
    }
    .hero-panel { width: 100%; max-width: 480px; }
}

/* Breite Bildschirme: Logo/Text links, Panel rechts, beides weiter auseinander,
   damit der Hero die Fläche füllt statt als kleiner Block in der Mitte zu stehen */
@media (min-width: 1001px) {
    .hero-layout {
        max-width: 1640px;
        padding: 0 clamp(16px, 4vw, 80px);
        gap: clamp(4rem, 9vw, 12rem);
    }
    /* Zwei Spalten nur mit Premier-Panel -- ohne bleibt der Hero einspaltig und zentriert */
    .hero-layout:not(.hero-layout--single) {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    }

    .hero-layout:not(.hero-layout--single) .hero-content {
        text-align: left;
        padding: 0;
    }
    .hero-layout:not(.hero-layout--single) .hero-content p { margin-left: 0; }
    .hero-layout:not(.hero-layout--single) .btn-row,
    .hero-layout:not(.hero-layout--single) .stats { justify-content: flex-start; }

    .hero-logo { width: clamp(520px, 38vw, 780px); }
    .hero-content p { font-size: 1.2rem; max-width: 36rem; }

    /* Lichtschein hinter das Logo statt in die Bildmitte */
    .hero-glow { left: 35%; }

    .panel-card { padding: 1.25rem 1.5rem; }
    .premier-rank-value { font-size: 3.5rem; }
}

/* Zahlen unter den Buttons mit Trennstrichen */
.hero-content .stats > div + div {
    padding-left: 3rem;
    border-left: 1px solid rgba(156, 147, 189, 0.25);
}
@media (max-width: 600px) {
    .hero-content .stats > div + div { padding-left: 1.5rem; }
}

/* Werte-Karten */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    text-align: left;
}
.value-card {
    background: var(--bg-card, #131924);
    border: 1px solid var(--border, #232a36);
    border-radius: 14px;
    padding: 2rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.value-card:hover {
    border-color: #4D21EB;
    transform: translateY(-4px);
}
.value-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(77, 33, 235, 0.15);
    color: #B6FF00;
    margin-bottom: 1.25rem;
}
.value-icon svg { width: 24px; height: 24px; }
.value-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.value-card p {
    color: #9C93BD;
    font-size: 0.95rem;
}

/* Beitreten-Band */
.cta-band {
    padding: 0 16px 6rem;
}
.cta-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #3A2F6B;
    background:
        radial-gradient(ellipse at top left, rgba(182, 255, 0, 0.12), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(77, 33, 235, 0.45), transparent 60%),
        #0D1020;
}
.cta-band h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    margin-bottom: 0.75rem;
}
.cta-band p {
    color: #9C93BD;
    max-width: 34rem;
    margin: 0 auto;
}

/* Inhalt darf nie breiter als der Bildschirm werden */
.hero-layout > * { min-width: 0; max-width: 100%; }
/* Ohne Premier-Panel: Textblock über die volle Breite (sonst schrumpft er auf die Textbreite
   und die Kennzahlen-Reihe läuft links und rechts hinaus) */
.hero-layout--single .hero-content { width: 100%; }
.hero-content .stats { flex-wrap: wrap; row-gap: 1.25rem; }

@media (max-width: 1000px) {
    .hero-layout, .hero-layout--single { justify-items: stretch; }
}

@media (max-width: 600px) {
    .hero { padding: 2.5rem 0 4.5rem; }
    .hero-logo { max-width: 340px; width: 100%; }
    .hero-content p { font-size: 1rem; }
    .hero-content .btn-row { gap: 0.75rem; }
    .hero-content .btn-row .btn { flex: 1 1 140px; text-align: center; }
    /* Kennzahlen als 2x2-Raster statt einer zu breiten Reihe */
    .hero-content .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        margin-top: 2.25rem;
    }
    .hero-content .stats > div + div { padding-left: 0; border-left: none; }
    .hero-content .stat-value { font-size: 1.5rem; }
    .cta-band-inner { padding: 2.5rem 1.25rem; }
    .value-card { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint { animation: none; }
    .value-card { transition: none; }
}