/* =========================================================================================================================== */
/*                                            🏠 HOME                                                                          */
/*                                            📍 static/css/pages/home/home.css                                                */
/* =========================================================================================================================== */



/* Karten transparent, damit Matrix durchscheint */
#home {
    position: relative;
    overflow: hidden; /* Canvas bleibt sauber */
    width: 100%; /* statt 200vw */
}

/* Abstand zwischen Überschrift (rotating-title) und erster Card */
#home .rotating-title {
    margin-bottom: 5rem; /* Abstand nach unten zur ersten Card */
}

/* =========================================================================================================================== */

/* Wrapper für Titel + Electric Canvas */
.hero-title {
    position: relative;
    width: 100%;
    margin-bottom: 1.875rem; /* 30px */
    z-index: 1;
}

/* Rotating Title transparent, damit Matrix-Background durchscheint */
.rotating-title {
    display: flex;
    justify-content: space-evenly; /* gleichmäßiger Abstand über volle Breite */
    align-items: center;
    width: 100%;
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0; /* Abstand jetzt über .hero-title geregelt */

    font-family: "Courier New", "OCR A Std", monospace; /* digitale Schriftart */
    background-color: transparent !important; /* kein Hintergrund */
    box-shadow: none !important;              /* keine Schatten */
    border: none !important;                  /* keine Ränder */
    position: relative;                       /* wichtig für Overlay-Kontext */
    z-index: 1;                               /* Text unter Electric-Canvas, aber über Matrix */
}

/* Titel-Buchstaben */
.rotating-title span {
    display: inline-block;
    animation: glowPulse 4s ease-in-out infinite;
}

/* Subtiler Bitcoin-Glow */
@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 6px rgba(247,147,26,0.4);
        color: #f7931a;
    }
    50% {
        text-shadow: 0 0 16px rgba(247,147,26,0.8);
        color: #ffb347;
    }
}

/* Electric Canvas über dem Titel */
#electric-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    pointer-events: none;
    z-index: 2;
    background: transparent;
}

/* =========================================================================================================================== */

/* MATRIX-STIL*/
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}
.rotating-title { color: #0F0; }

/* =========================================================================================================================== */

/* Grundregeln für alle Card-Header */
#home .card-header {
    border-radius: 1rem 1rem 0 0;                    /* obere Ecken abgerundet */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);         /* leichter Schatten für Tiefe */
    padding: 1rem;                                   /* Innenabstand */
    text-align: center;                              /* Überschrift zentriert */
}

/* Standard: h4 */
#home .card-header h4 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: white; 
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.25rem;
}

/* HOME_CARD*/
#home .card {
    flex: none;                                      /* verhindert Flex-Schrumpfung */
    width: 85%;                                      /* Breite der Card */
    max-width: none;                                 /* keine künstliche Begrenzung */
    margin: 5rem auto;                               /* vertikaler Abstand oben/unten: 5rem, horizontal zentriert */
    box-sizing: border-box;                          /* Padding/Border korrekt einberechnen */
    background-color: rgba(255, 255, 255, 0.1);    /* leicht transparentes Weiß, Hintergrund durchscheint */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);        /* leichter Schatten für Tiefe */
    border: 1px solid rgba(255, 255, 255, 0.2);    /* dezente Linie um die Card */
    border-radius: 1rem;                             /* abgerundete Ecken */
    position: relative;                              /* für Layering */
    z-index: 1;                                      /* sorgt dafür, dass die Card über Canvas liegt */
}

/* HOME – CARD BODY BASIS (ALLE außer Donation)     */
#home .card:not(.donation) .card-body p {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 0.3125rem;
    padding-bottom: 0.3125rem;
    border-bottom: 0.0625rem solid #ccc;

    font-size: 1.6rem;
    font-weight: 500;
    color: white;
}

#home .card:not(.donation) .card-body p strong {
    flex: 1;
    text-align: left;

    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Werte in Cards (rechts) */
#home .card:not(.donation) .card-body p span {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Meta-Dashboard / Systemstatus */
.meta-dashboard-table td,
.meta-right {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* =========================================================================================================================== */

/* BLOCKCHAIN-INFO->SIEGERHASH */
.card.blockchain .card-body {
    overflow-x: hidden;
}

/* Spezieller Marquee-Container außerhalb von Flex-Layout */
#winner_hash_marquee-container {
    display: inline-block !important;  /* Flex wird überschrieben */
    position: relative; 
    overflow: hidden;
    max-width: 40rem;;   /* sichtbare Breite */
    vertical-align: middle;
}

#winner_hash_marquee {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: scroll-hash 75s linear infinite;
}

@keyframes scroll-hash {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-120%); }
}

/* =========================================================================================================================== */

/* Interne Verlinkung */
.hashrate-link {
    color: #ffffff;
    text-decoration: none;   /* Entfernt Underline */
    font-weight: 500;
    display: inline-block;
    transition: color 0.25s ease;
    cursor: pointer;
}

.hashrate-link:hover {
    color: #f7931a; /* Bitcoin Orange */
    animation: btcHeartbeat 0.9s ease-in-out;
    text-shadow: 0 0 6px rgba(247,147,26,0.6);
}

/* =========================================================================================================================== */

/* -------- Body Links -------- */
.home-card-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: inherit;
    display: inline-block;
    transition: all 0.25s ease;
    cursor: pointer;
}

.home-card-link:hover {
    color: #f7931a; /* Bitcoin Orange */
    text-shadow: 0 0 6px rgba(247,147,26,0.65);
    animation: btcHeartbeat 0.9s ease-in-out;
}

.home-card-link:focus {
    outline: 2px solid #f7931a;
}


/* -------- Header Links -------- */
.card-header .home-card-header-link {
    color: inherit;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;   /* 🔥 WICHTIG */
    cursor: pointer;         /* optional */
}

.card-header .home-card-header-link:hover {
    color: #f7931a;
    text-shadow: 0 0 6px rgba(247,147,26,0.65);
    animation: btcHeartbeat 0.9s ease-in-out;
}

/* ❤️ Heartbeat Animation (global) */
@keyframes btcHeartbeat {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.06); }
    50%  { transform: scale(1); }
    75%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* =========================================================================================================================== */

/* Card Header Hintergrundfarben (gesamte Spalte) */

/* Bitcoin-Info Card */
.card-header.bitcoin {
    background-color: rgba(141, 139, 19, 0.5); /* Orange mit Transparenz */
}
/* Blockchain-Info Card */
.card-header.blockchain {
    background-color: rgba(5, 54, 107, 0.5); /* Blau mit Transparenz */
}
/* Mempool-Info Card */
.card-header.mempool {
    background-color: rgba(23, 162, 184, 0.5); /* Hellblau mit Transparenz */
}
/* TOP-10-BTC-Transaktionen */
.card-header.top-btc-transactions {
    background-color: rgba(211, 18, 18, 0.5); /* Blau mit Transparenz */
}
/* TOP-50-BTC-Transaktionen - EVER */
.card-header.top-btc-transactions-ever {
    background-color: rgba(0, 0, 0, 0.5); /* Schwarz mit Transparenz */
}
/* Netzwerk-Info Card */
.card-header.network {
    background-color: rgba(10, 80, 26, 0.5); /* Grün mit Transparenz */
}
/* Besucher-Info Card */
.card-header.visitor {
    background-color: rgba(99, 97, 96, 0.2); /* Orange mit Transparenz */
}
/* Unterstütze-Projekt Card */
.card-header.donation {
    background-color: rgba(52, 58, 64, 0.2); /* Dunkelgrau mit Transparenz */
}
/* META-DASHBOARD */
.card-header.meta {
    background-color: rgba(25, 117, 12, 0.1); /* Schwarz mit erhöhter Transparenz */
}

/* =========================================================================================================================== */

/* LINKS & RECHTS IDENTISCH FORMATIEREN */
#bitcoin-info p,
#blockchain-info p,
#mempool-info p,
#visitor-info p,
#donation-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3125rem;
    border-bottom: 0.0625rem solid #ccc;
    padding-bottom: 0.3125rem;

    text-transform: none;      /* KEIN UPPERCASE */
    font-weight: normal;       /* KEIN FETT BY DEFAULT */
    font-size: 1.6rem;         /* SCHRIFTGRÖßE Einheitliche Größe */
    color: white;            /* Einheitliche Farbe */
}

/* Zusätzlicher Abstand oben für Container */
.container.mt-5 { 
    margin-top: 9.375rem; /* 150px */
}

/* =========================================================================================================================== */

/* HOME – TOP BTC TABLE (CARD-CONTENT STYLE)       */
#home .top-btc-table {
    width: 100%;
    border-collapse: collapse;

    font-size: 1.6rem;          /* identisch zu Card-Body */
    font-weight: 500;           /* ruhig wie Card-Werte */
    color: white;
    font-family: inherit;
}

/* Zellen – wie Card-Zeilen */
#home .top-btc-table th,
#home .top-btc-table td {
    padding: 0.3125rem 0.5rem;          /* Card-Zeilen-Rhythmus */
    border-bottom: 0.0625rem solid #ccc;

    word-break: break-all;
    font-weight: 500;                   /* ❗ nicht fett */
    text-transform: none;
}

/* Tabellen-Header = Labels */
#home .top-btc-table thead th {
    background-color: transparent;

    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;

    font-size: 1.6rem;                  /* nicht größer als Content */
    color: white;
}

/* Spaltenausrichtung */
/* NR */
#home .top-btc-table th:nth-child(1),
#home .top-btc-table td:nth-child(1) {
    text-align: left;
}

/* TXID */
#home .top-btc-table th:nth-child(2),
#home .top-btc-table td:nth-child(2) {
    text-align: center;
}

/* BTC */
#home .top-btc-table th:nth-child(3),
#home .top-btc-table td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums; /* ruhige Zahlen */
}

/* =========================================================================================================================== */

/* Flexbox für Spendenkarten */
.donation .card-body {
    display: flex; 
    justify-content: space-between; /* Inhalt aufteilen */
    align-items: center; /* Vertikal zentrieren */
    flex-wrap: wrap; /* Zeilen umbrechen, falls nötig */
}

/* Textbereich in Spendenkarten */
.donation .text {
    max-width: 70%; /* z. B. 70% der Karte für Text */
    color: white;            /* Einheitliche Farbe */
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding-right: 0.9375rem; /* 15px Abstand rechts */
    min-width: 12.5rem; /* 200px Mindestbreite */
    text-align: center; 
}

/* Codeblöcke in Spendenkarten */
.donation code {
    word-break: break-all; /* Zeilenumbruch bei langen Codes */
    display: inline-block;
    padding: 0.25rem 0.5rem; /* 4px 8px Innenabstand */
    background: #f8f9fa; 
    border-radius: 0.375rem; /* 6px abgerundete Ecken */
}

/* Kopieren-Button in Donation-Card vergrößern */
.donation #copyBtn {
    font-size: 1.25rem;          /* größere Schrift */
    padding: 0.25rem 0.5rem;     /* mehr Innenabstand */
    min-width: 6rem;             /* Mindestbreite für bessere Klickbarkeit */
}

/* QR-Code Bereich in Spendenkarten */
.donation .qr {
    flex: 0 0 auto; 
    text-align: right; 
    margin-top: 0.625rem; /* 10px Abstand oben */
}

/* Linie in der Donation-Card entfernen */
.donation #donation-info,
.donation .card-body p {
    border-bottom: none;
}