/* ===========================================================================
   STARTSEITE v2 (nur auf index.php, nur wenn html.hp-v2 gesetzt ist)
   Gleicher Stil wie die Turnierseite: eckig, ruhiger, klare Akzentfarbe.
   Zurückstellen: index.php?design=classic  |  für alle: in index.php HP_DESIGN_V2_DEFAULT auf false
   Backup: Z:\weareone_backups\pre_startseite_*
   =========================================================================== */

/* ---------- 1) Alles eckig (2 px), nur kleine Statuspunkte bleiben rund ---------- */
html.hp-v2 .content-wrapper *,
html.hp-v2 .top-select, html.hp-v2 .sound-toggle-btn, html.hp-v2 .settings-toggle-btn,
html.hp-v2 .discord-widget-pill, html.hp-v2 .discord-widget-pill *, html.hp-v2 .settings-wrapper *,
html.hp-v2 .theme-container, html.hp-v2 .god-modal-overlay *, html.hp-v2 .quick-index, html.hp-v2 .quick-index * {
    border-radius: 2px !important;
}
html.hp-v2 .ember, html.hp-v2 .squad-avatar-status, html.hp-v2 .squad-legend-dot, html.hp-v2 .ops-row-dot,
html.hp-v2 .intro-title-dot, html.hp-v2 .hero-glow-ring, html.hp-v2 .chat-tab-live-dot, html.hp-v2 .logo-energy-field {
    border-radius: 50% !important;
}
html.hp-v2 { --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; }

/* ---------- 2) Hero-Buttons: ruhig statt fünf Farben - ein primärer, ein hervorgehobener (Turnier), Rest neutral ---------- */
html.hp-v2 .hero-banner-wrap .btn-row .btn {
    background: rgba(255, 255, 255, 0.04) !important; border: 1px solid #3a3f46 !important; color: #d5d9de !important;
    box-shadow: none !important; text-shadow: none !important; font-weight: 600; letter-spacing: 0.04em;
}
html.hp-v2 .hero-banner-wrap .btn-row .btn:hover { background: rgba(46, 204, 113, 0.14) !important; border-color: var(--main-cyan) !important; color: #fff !important; transform: translateY(-1px); }
html.hp-v2 .hero-banner-wrap .btn-row .btn-discord { background: var(--main-cyan) !important; border-color: var(--main-cyan) !important; color: #04150c !important; }
html.hp-v2 .hero-banner-wrap .btn-row .btn-discord:hover { filter: brightness(1.1); background: var(--main-cyan) !important; color: #04150c !important; }
html.hp-v2 .hero-banner-wrap .btn-row .btn:last-child { border-color: var(--main-cyan) !important; color: var(--main-cyan) !important; }
html.hp-v2 .hero-banner-wrap .btn-row .btn:last-child:hover { color: #fff !important; }

/* ---------- 3) Schnell-Navigation: eckig, kollidiert nicht mehr mit Login/Zahnrad, zeigt den aktuellen Abschnitt ---------- */
html.hp-v2 .quick-index { gap: 8px; padding: 8px; background: rgba(8, 10, 16, 0.97); backdrop-filter: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.12); justify-content: flex-start; }
html.hp-v2 .quick-index-glow { display: none; }
html.hp-v2 .quick-index-item { background: transparent; border: 1px solid transparent; box-shadow: none; padding: 10px 16px; }
html.hp-v2 .quick-index-item:hover, html.hp-v2 .quick-index-item:focus-visible { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; transform: none; }
html.hp-v2 .quick-index-item.active { background: linear-gradient(135deg, var(--main-cyan), #16a085); color: #04150c; border-color: transparent; }
html.hp-v2 .quick-index-item.active .qi-label { color: #04150c; }
html.hp-v2 .quick-index-top { margin-left: auto; }
@media (min-width: 901px) {
    /* rechts oben schweben Login-Pille und Zahnrad: die Leiste hält dazu Abstand */
    html.hp-v2 .quick-index { width: calc(100% - 340px); margin-left: 0; margin-right: auto; }
}

/* ---------- 4) Panels: klare Linien statt starkem Leuchten ---------- */
html.hp-v2 .glass-panel { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); }
html.hp-v2 .intro-feature-card, html.hp-v2 .game-card, html.hp-v2 .deck-stat-tile, html.hp-v2 .ops-row { border-color: rgba(255, 255, 255, 0.09); }

html.hp-v2 .hp-design-switch { text-align: right; max-width: 1100px; margin: 0 auto 16px; font-size: 0.72rem; color: #8b95a1; }
html.hp-v2 .hp-design-switch a { color: #cfd6dd; text-decoration: underline; text-underline-offset: 3px; }
html.hp-v2 .hp-design-switch b { color: var(--main-cyan); }

/* Navigation in einer Zeile: "Nach oben" nur als Symbol, etwas kompaktere Einträge */
html.hp-v2 .quick-index { flex-wrap: nowrap; }
html.hp-v2 .quick-index-item { padding: 10px 12px; flex: 0 1 auto; white-space: nowrap; }
html.hp-v2 .quick-index-top .qi-label { display: none; }
html.hp-v2 .quick-index-top { padding: 10px 14px; }
@media (min-width: 901px) { html.hp-v2 .quick-index { width: calc(100% - 300px); } }
@media (max-width: 900px) { html.hp-v2 .quick-index { flex-wrap: wrap; } html.hp-v2 .quick-index-top .qi-label { display: inline; } }

/* Handy: Navigation als schmale, seitlich wischbare Zeile unterhalb von Login/Zahnrad statt vierzeiligem Block */
@media (max-width: 900px) {
    html.hp-v2 .quick-index { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; top: 64px; width: auto; margin: 8px 0 16px; gap: 4px; padding: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    html.hp-v2 .quick-index::-webkit-scrollbar { display: none; }
    html.hp-v2 .quick-index-item { flex: 0 0 auto; padding: 8px 10px; font-size: 0.62rem; }
    html.hp-v2 .quick-index-top { margin-left: 0; }
    html.hp-v2 .quick-index-top .qi-label { display: none; }
}

/* Kein seitliches Überlaufen durch dekorative Leuchtflächen (v. a. Handy) */
html.hp-v2 .content-wrapper { overflow-x: clip; }


/* ==================== 🧭 HAUPT-NAVIGATION OBEN (ersetzt die zweite Leiste unter dem Hero) ====================
   Feste Leiste ganz oben: Marke links, Bereiche daneben, rechts Platz für Login-Pille + Zahnrad (die in die Leiste rücken). */
html.hp-v2 .quick-index {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
    margin: 0 !important; height: 60px; box-sizing: border-box; padding: 0 340px 0 16px !important;
    display: flex; flex-wrap: nowrap !important; align-items: stretch; justify-content: flex-start; gap: 2px !important;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    background: rgba(8, 10, 16, 0.98) !important; backdrop-filter: none !important;
    border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important; z-index: 950 !important;
}
html.hp-v2 .quick-index::-webkit-scrollbar { display: none; }
html.hp-v2 body { padding-top: 60px; }
html.hp-v2 .discord-widget-pill { top: 8px !important; }
html.hp-v2 .settings-wrapper { top: 10px !important; }
html.hp-v2 #operations, html.hp-v2 #command-center, html.hp-v2 #battle-board, html.hp-v2 #command-deck { scroll-margin-top: 80px; }

html.hp-v2 .hp-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0 18px 0 4px; margin-right: 8px; border-right: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: #fff; }
html.hp-v2 .hp-brand img { height: 36px; width: auto; max-width: 44px; object-fit: contain; }
html.hp-v2 .hp-brand span { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
html.hp-v2 .hp-brand:hover span { color: var(--main-cyan); }

html.hp-v2 .quick-index-item { align-self: stretch; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px !important; background: transparent !important; border: none !important; border-bottom: 3px solid transparent !important; box-shadow: none !important; color: #aab3bd; text-decoration: none; cursor: pointer; flex: 0 0 auto !important; white-space: nowrap; }
html.hp-v2 .quick-index-item:hover, html.hp-v2 .quick-index-item:focus-visible { background: rgba(255, 255, 255, 0.05) !important; color: #fff; transform: none !important; }
html.hp-v2 .quick-index-item.active { background: transparent !important; color: #fff !important; border-bottom-color: var(--main-cyan) !important; }
html.hp-v2 .quick-index-item.active .qi-label { color: #fff !important; }
html.hp-v2 .quick-index-item .qi-label { font-size: 0.7rem; letter-spacing: 0.1em; }
html.hp-v2 .quick-index-top { display: none !important; }
html.hp-v2 .hp-nav-link:first-of-type { margin-left: 0; }
html.hp-v2 .hp-nav-link { border-left: 0; }
html.hp-v2 .hp-nav-link[href*="tournament"] { margin-left: auto; color: var(--main-cyan); }

@media (max-width: 900px) {
    html.hp-v2 .quick-index { padding-right: 200px !important; height: 56px; }
    html.hp-v2 body { padding-top: 56px; }
    html.hp-v2 .hp-brand span { display: none; }
    html.hp-v2 .hp-brand { padding-right: 12px; }
    html.hp-v2 .quick-index-item { padding: 0 12px !important; }
    html.hp-v2 .hp-nav-link[href*="tournament"] { margin-left: 0; }
    html.hp-v2 #operations, html.hp-v2 #command-center, html.hp-v2 #battle-board, html.hp-v2 #command-deck { scroll-margin-top: 70px; }
}

/* Handy: zwei Zeilen - oben Marke + Login/Zahnrad, darunter die Bereiche als wischbare Zeile */
@media (max-width: 900px) {
    html.hp-v2 .quick-index { top: 56px !important; height: 44px; padding: 0 6px !important; }
    html.hp-v2 .quick-index::before {
        content: '[GER] OVERLORD'; position: fixed; top: 0; left: 0; right: 0; height: 56px; box-sizing: border-box;
        display: flex; align-items: center; padding: 0 0 0 14px; z-index: -1;
        font: 700 0.62rem 'Orbitron', sans-serif; letter-spacing: 0.12em; color: #fff;
        background: rgba(8, 10, 16, 0.98); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    html.hp-v2 .hp-brand { display: none; }
    html.hp-v2 body { padding-top: 100px; }
    html.hp-v2 #operations, html.hp-v2 #command-center, html.hp-v2 #battle-board, html.hp-v2 #command-deck { scroll-margin-top: 112px; }
}