/* ==========================================================================
   1. SCHRIFTARTEN & REGISTRIERUNG (LOKAL)
   ========================================================================== */
@font-face {
    font-family: 'OrbitronLocal';
    src: url('/fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OrbitronLocal';
    src: url('/fonts/Orbitron-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. THEME-VARIABLEN (RESHIRAM & ZEKROM)
   ========================================================================== */
/* ==========================================================================
   2. THEME-VARIABLEN (MESSERSCHARF AM BODY VERANKERT)
   ========================================================================== */
/* Standard-Zustand oder explizit Reshiram */
body, body[data-theme="reshiram"] {
    --bg-color: #FFFFFF;
    --text-color: #121212;
    --accent-color: #FF3333; /* Reshiram-Rot */
    --eye-color: #3399FF;
    --card-bg: #F5F5F5;
}

    /* Wenn das JavaScript auf Zekrom umschaltet */
    body[data-theme="zekrom"] {
        --bg-color: #121212;
        --text-color: #FFFFFF;
        --accent-color: #00CCFF; /* Zekrom-Blitzblau */
        --eye-color: #FF2255;
        --card-bg: #1E1E1E;
    }

/* ==========================================================================
   3. GLOBALES LAYOUT (OHNE PRELLUNGEN)
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'OrbitronLocal', sans-serif;
    font-weight: 400;
    /* Der sanfte Morph-Effekt beim Umschalten */
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .display-3 {
    font-weight: 900;
}

/* ==========================================================================
   4. NAVBAR & FOOTER (KOPF- UND FUSSZEILE)
   ========================================================================== */
.navbar {
    background-color: var(--card-bg) !important;
    border-bottom: 2px solid var(--accent-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Deine präzise Logo-Klasse (SCHÜTZT DIE ROTEN ANFANGSBUCHSTABEN!) */
.navbar-brand-pixel {
    font-family: 'OrbitronLocal', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.7rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--text-color) !important;
}

/* Standard-Links in der Navbar */
.navbar-nav .nav-link {
    color: var(--text-color) !important;
}

footer.footer {
    position: relative !important; /* Verhindert, dass er willkürlich nach oben schwebt! */
    margin-top: auto !important; /* Drückt ihn im Flexbox-Layout automatisch nach ganz unten */
    background-color: var(--card-bg) !important;
    border-top: 2px solid var(--accent-color) !important;
    color: var(--text-color) !important;
    width: 100% !important;
    padding: 15px 0 !important; /* Macht ihn schön schlank */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   5. BOXEN & CARDS (HERO & FEATURE)
   ========================================================================== */
/* Der große Haupt-Hero-Container */
.cc-hero {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-bottom: 5px solid var(--accent-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Die drei Feature-Boxen unten */
.cc-feature-card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-top: 3px solid var(--accent-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   6. PREMIUM CONNECTERS CLUB BUTTONS
   ========================================================================== */
.btn-pokemon {
    font-family: 'OrbitronLocal', sans-serif !important;
    font-weight: 900 !important;
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--accent-color) !important;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .btn-pokemon:hover {
        background-color: transparent !important;
        color: var(--accent-color) !important;
        border-color: var(--eye-color) !important;
        transform: scale(1.05);
    }

.btn-pokemon-outline {
    font-family: 'OrbitronLocal', sans-serif !important;
    font-weight: 900 !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
    border: 2px solid var(--text-color) !important;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .btn-pokemon-outline:hover {
        color: var(--eye-color) !important;
        border-color: var(--eye-color) !important;
        transform: scale(1.05);
    }

/* Standard-Links auf der Seite */
.cc-link {
    color: var(--accent-color);
    text-decoration: none;
}

    .cc-link:hover {
        color: var(--eye-color);
    }

/* --- FORMULARFELDER FÜR RESHIRAM & ZEKROM --- */
.form-control {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif;
    transition: all 0.3s ease;
}

    /* Wenn das Feld aktiv wird, leuchtet es im Reshiram- oder Zekrom-Augenblau */
    .form-control:focus {
        background-color: var(--card-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--eye-color) !important;
        box-shadow: 0 0 8px var(--eye-color) !important;
    }

.form-label {
    color: var(--text-color) !important;
    font-weight: 900;
}

/* Zwingt die schwebenden Labels (Floating Labels) in den Theme-Look */
.form-floating > label {
    color: var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif;
    font-weight: 400 !important;
}

/* Verhindert, dass Bootstrap beim Anklicken des Feldes das Label wieder schwarz färbt */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--accent-color) !important; /* Leuchtet beim Fokussieren im Drachen-Stil! */
    opacity: 0.8;
}

/* Der Haken für "Angemeldet bleiben" (Checkbox und Label) */
.form-check-input {
    background-color: var(--card-bg) !important;
    border-color: var(--text-color) !important;
    font-weight: 400 !important;
}

    .form-check-input:checked {
        background-color: var(--accent-color) !important;
        border-color: var(--accent-color) !important;
    }

.form-check-label,
label.form-check-label{
    color: var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif;
    font-weight: 400 !important;
}

/* --- CHOICES.JS SMART DROPDOWN THEMING --- */
.choices__inner {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif !important;
    border-radius: 4px !important;
}

.choices__list--dropdown {
    background-color: var(--bg-color) !important;
    border: 2px solid var(--text-color) !important;
}

.choices__input {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important;
}

/* --- ZEKROM & RESHIRAM BOXEN-TUNING --- */
.card.cc-card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid var(--text-color) !important;
}

.card-header.cc-card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-color) !important;
    border-bottom: 2px solid var(--text-color) !important;
    font-family: 'OrbitronLocal', sans-serif !important;
}

.card-body.cc-card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Verhindert unschöne weiße Ränder im Zekrom-Modus */
.form-control, .form-select {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--text-color) !important;
}

    .form-control:focus, .form-select:focus {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.25) !important;
    }

/* ==========================================================================
   7. LIVE-SAMMELBOX KARTEN-TUNING (MESSERSCHARF FÜR RESHIRAM & ZEKROM)
   ========================================================================== */
.card.cc-pokemon-card {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--text-color) !important;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    /* Verhindert, dass die Texte im Zekrom-Modus unsichtbar schwarz werden! */
    .card.cc-pokemon-card div,
    .card.cc-pokemon-card .font-weight-bold,
    .card.cc-pokemon-card .text-truncate {
        color: var(--text-color) !important;
    }

    /* Die National-Dex-Nummer kriegt ein edles, dezentes Glimmen */
    .card.cc-pokemon-card .text-muted {
        color: var(--text-color) !important;
        opacity: 0.4 !important;
    }

    /* Kleiner Hover-Effekt, wenn die Marathon-Maus über die Karte fliegt */
    .card.cc-pokemon-card:hover {
        border-color: var(--accent-color) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    }

/* Kleine Animation für den Status in der Roadmap */
.spin-badge i {
    display: inline-block;
    animation: rotation 3s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}