@charset "UTF-8";
/*
 * Estrel Tower — Daten & Fakten Section
 * Pixel-perfect Figma implementation (1920 design frame).
 *
 * Layout:
 *   Section        1920 × 482  bg #FEF5EC (Butter Yellow)
 *   Title          847 × 105   centered, top 77
 *     "Daten &" Söhne 400 124/105 + "Fakten" Alpina 250i 124/105  #14172D
 *   Two columns    570px each, gap 253, top 259
 *   Each row       48px tall, divider 1px #14172D @ 90% opacity
 *     Value        Alpina 250i 19/22  #14172D
 *     Label        Söhne 400   19/38  #14172D, offset 114 from left
 *
 * Scaling: --u = 100cqi / 1920 (full-bleed section).
 */

/* Full-viewport bleed über die 1920px-Kappung von .estrel-page hinaus —
   gleicher Trick wie bei .estrel-footer. Inner .estrel-stats__inner hat
   max-width: 1920px + margin: 0 auto, dadurch bleibt der Inhalt zentriert. */
.content-estrel-stats {
    width: 100vw;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 calc(50% - 50vw) !important;
}

.estrel-stats {
    container-type: inline-size;
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    background: #FEF5EC;
    overflow: hidden;
}

.estrel-stats__inner {
    --u: calc(100cqw / 1920);
    position: relative;
    height: calc(482 * var(--u));
    max-width: 1920px;
    margin: 0 auto;
}

/* Title — centered */
.estrel-stats__heading {
    position: absolute;
    top: calc(77 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    color: #14172D;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
    text-align: center;
}

.estrel-stats__heading-line1 {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
}

.estrel-stats__heading-line2 {
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
}


/* ============================
   GRID — two columns
   ============================ */

.estrel-stats__grid {
    position: absolute;
    top: calc(259 * var(--u));
    left: calc(278 * var(--u));
    display: flex;
    gap: calc(253 * var(--u));
}

.estrel-stats__col {
    width: calc(570 * var(--u));
}


/* ============================
   ROW — value + label + divider
   ============================ */

.estrel-stats__row {
    display: flex;
    align-items: baseline;
    height: calc(48 * var(--u));
    padding-top: calc(11 * var(--u));
}

.estrel-stats__row + .estrel-stats__row {
    border-top: 1px solid rgba(20, 23, 45, 0.9);
    margin-top: calc(7 * var(--u));
}

.estrel-stats__value {
    flex: 0 0 calc(114 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}

.estrel-stats__label {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(38 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}


/* ============================
   SUNRISE THEME
   ============================ */

body.sunrise .estrel-stats {
    background: #FED3CD;
}


/* ============================
   MOBILE (<768)
   ============================ */

@media (max-width: 1024px) {
    .estrel-stats__inner {
        height: auto;
        padding: 50px var(--container-padding);
    }

    .estrel-stats__heading {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: 0.85;
        margin-bottom: 2.5rem;
        text-align: center;
    }

    .estrel-stats__grid {
        position: relative;
        top: auto;
        left: auto;
    }

    .estrel-stats__row {
        height: auto;
        padding: 0.875rem 0;
    }

    .estrel-stats__value {
        flex: 0 0 7rem;
        font-size: 1rem;
        line-height: 1.3;
    }

    .estrel-stats__label {
        font-size: 1rem;
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    .estrel-stats__inner {
        height: auto;
        padding: 40px 20px;
    }

    .estrel-stats__heading {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        font-size: clamp(2.5rem, 11vw, 4rem);
        line-height: 0.85;
        margin-bottom: 2rem;
        text-align: center;
    }

    .estrel-stats__grid {
        position: relative;
        top: auto;
        left: auto;
        flex-direction: column;
        gap: 0;
    }

    .estrel-stats__col {
        width: 100%;
    }

    /* Add divider above first row of second column (missing because no sibling) */
    .estrel-stats__col + .estrel-stats__col .estrel-stats__row:first-child {
        border-top: 1px solid rgba(20, 23, 45, 0.9);
        margin-top: 0.5rem;
    }

    .estrel-stats__row {
        height: auto;
        padding: 0.75rem 0;
    }

    .estrel-stats__value {
        flex: 0 0 6rem;
        font-size: 1rem;
        line-height: 1.3;
    }

    .estrel-stats__label {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}