/* =========================================================================================================================== */
/*                                            🧩 ABOUT BITCOIN – SHARED                                                        */
/*                                            📍 static/css/pages/about_bitcoin.css                                            */
/* =========================================================================================================================== */



/* =========================================================================================================================== */
/*                                            📍 Used in: pioneers, technology                                                 */
/* =========================================================================================================================== */

.accordion-container {
    text-align: center;
}

.accordion-card {
    background: rgba(20,20,20,0.5);
    border: 0.0625rem solid rgba(255,255,255,0.15); /* 1px -> rem */
    border-radius: 1rem;
    box-shadow: 0 0 0.75rem rgba(0,0,0,0.3);
    margin-bottom: 0.625rem; /* 1rem margin für Abstand */
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.3s ease;
    color: #fff;
}

.accordion-card:hover {
    transform: translateY(-0.125rem); /* 0.2rem -> rem */
    box-shadow: 0 0 1.125rem rgba(255, 255, 255, 0.2);
}

.accordion-header {
    background: rgba(20,20,20,0.5);
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 0.875rem 1.5625rem; /* 14px 25px -> rem */
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: background 0.3s ease, color 0.3s ease;
    border-bottom: 0.0625rem solid rgba(255,255,255,0.15); /* 1px */
}

.accordion-header:hover {
    background: rgba(255,215,0,0.1);
    color: #fff;
}

.accordion-body {
    background: rgba(20,20,20,0.5);
    color: #fff;
    text-align: justify;
    padding: 1.25rem 1.5625rem; /* 20px 25px -> rem */
    line-height: 1.7;
    border-top: 0.0625rem solid rgba(255,255,255,0.15);
    border-radius: 0 0 1rem 1rem;
    box-shadow: inset 0 0.0625rem 0.3125rem rgba(255,255,255,0.05);
}

.accordion-body p,
.accordion-body ul,
.accordion-body ol,
.accordion-body li {
    font-size: 1.4rem; /* vorher 1.4rem oder px */
    line-height: 1.7;
    color: #f0f0f0;
    margin-bottom: 0.75rem;
}

.accordion-body strong {
    color: #fff;
}



/* =========================================================================================================================== */
/*                                            📍 Used in: nodes, miners                                                        */
/* =========================================================================================================================== */

/* Container */
#ABOUT_BITCOIN_NODES,
#ABOUT_BITCOIN_MINERS {
    text-align: justify;
    margin-top: 0;
    border-radius: 0.75rem;
}

/* Subtab-Sections */
#ABOUT_BITCOIN_NODES .subtab-section,
#ABOUT_BITCOIN_MINERS .subtab-section {
    background: rgba(15, 15, 15, 0.7);
    padding: 1.875rem 2.8125rem;
    margin-bottom: 1.5625rem;
    border-radius: 0.625rem;
    transition: background 0.3s ease;
}

#ABOUT_BITCOIN_NODES .subtab-section:hover,
#ABOUT_BITCOIN_MINERS .subtab-section:hover {
    background: rgba(20, 20, 20, 0.8);
}

/* Headings */
#ABOUT_BITCOIN_NODES h3,
#ABOUT_BITCOIN_MINERS h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.9375rem;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 0.3125rem rgba(0,0,0,0.5);
}

#ABOUT_BITCOIN_NODES h4,
#ABOUT_BITCOIN_MINERS h4 {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #32CD32;
    text-align: center;
}

/* Text & Lists */
#ABOUT_BITCOIN_NODES p,
#ABOUT_BITCOIN_NODES ul,
#ABOUT_BITCOIN_NODES ol,
#ABOUT_BITCOIN_NODES li,
#ABOUT_BITCOIN_MINERS p,
#ABOUT_BITCOIN_MINERS ul,
#ABOUT_BITCOIN_MINERS ol,
#ABOUT_BITCOIN_MINERS li {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #f0f0f0;
    margin-bottom: 0.25rem;
}

/* Images */
#ABOUT_BITCOIN_NODES .network-image,
#ABOUT_BITCOIN_MINERS .network-image {
    text-align: center;
    margin-bottom: 1.5rem;
}

#ABOUT_BITCOIN_NODES .network-image img,
#ABOUT_BITCOIN_MINERS .network-image img {
    max-width: 18.75rem;
    width: 100%;
    height: auto;
}



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



/* =========================================================================================================================== */
/*                                            🧩 ABOUT BITCOIN MOBILE – SHARED                                                 */
/*                                            📍 static/css/pages/about_bitcoin.css                                            */
/* =========================================================================================================================== */

@media (max-width: 768px) {

    /* ======================================================================================================================= */
    /*                                            📍 Used in: pioneers, technology                                             */
    /* ======================================================================================================================= */

    /* 🧩 ACCORDION */

    .accordion-header {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    .accordion-body {
        padding: 1rem;
        text-align: left;
    }

    .accordion-body p,
    .accordion-body ul,
    .accordion-body ol,
    .accordion-body li {
        font-size: 0.95rem;
        line-height: 1.6;
    }


    /* ======================================================================================================================= */
    /*                                            📍 Used in: nodes, miners                                                    */
    /* ======================================================================================================================= */

    /* 🧩 SUBTAB SECTIONS */

    #ABOUT_BITCOIN_NODES .subtab-section,
    #ABOUT_BITCOIN_MINERS .subtab-section {
        padding: 1.25rem 1rem;
    }

    /* 🧩 HEADINGS */

    #ABOUT_BITCOIN_NODES h3,
    #ABOUT_BITCOIN_MINERS h3 {
        font-size: 1.2rem;
    }

    #ABOUT_BITCOIN_NODES h4,
    #ABOUT_BITCOIN_MINERS h4 {
        font-size: 1.4rem;
    }

    /* 🧩 TEXT */

    #ABOUT_BITCOIN_NODES p,
    #ABOUT_BITCOIN_NODES li,
    #ABOUT_BITCOIN_MINERS p,
    #ABOUT_BITCOIN_MINERS li {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* 🧩 IMAGES */

    #ABOUT_BITCOIN_NODES .network-image img,
    #ABOUT_BITCOIN_MINERS .network-image img {
        max-width: 100%;
    }

}