/* Automatisch erzeugt von werkzeuge/code-seiten-einbetten.py aus
   bestand/elementor/waermepumpe-landingpage-c-meta.json.
   NICHT von Hand aendern — Aenderungen gehoeren in die Quelle. */
/* 1. BASIS-EINSTELLUNGEN */
.ms-code-widget-0 {
    font-family: 'PANGEA', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ms-code-widget-0 #infographic-container {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px 20px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    /* Zusätzliche Flexibilität für den Container, falls der Inhalt größer wird */
    display: flex; /* Macht den Container zu einem Flex-Container */
    flex-direction: column; /* Stapelt die Elemente vertikal */
    min-height: auto; /* Erlaubt dem Container, sich in der Höhe anzupassen */
}

/* 2. HEADER (Anti-Wackel Optimierung) */
.ms-code-widget-0 .infographic-header {
    text-align: left;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 85px; 
}

/* 3. ZÄHLER (Anti-Ruckel bei Zahlen) */
.ms-code-widget-0 .total-cost {
    font-size: 3.0rem;
    font-weight: 700;
    color: #3B5B50;
    margin: 0;
    line-height: 1.2;
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
    width: auto;
}

.ms-code-widget-0 .savings-badge {
    font-size: 1.125rem;
    font-weight: 600;
    color: #388E3C;
    background-color: #e6f4e8;
    padding: 4px 10px;
    border-radius: 16px;
    margin-left: 12px;
    white-space: nowrap;
}

.ms-code-widget-0 .subtitle {
    font-size: 1.125rem;
    font-weight: 400;
    color: #555;
    margin: 4px 0 0 0;
    width: 100%;
}

/* 4. BALKEN-DIAGRAMM STRUKTUR */
.ms-code-widget-0 .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1; /* Erlaubt dem Balkendiagramm, den verfügbaren Platz einzunehmen */
}

.ms-code-widget-0 .bar-item {
    display: flex;
    flex-direction: column;
}

.ms-code-widget-0 .label {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px 0;
}

.ms-code-widget-0 .bar-track {
    width: 100%;
    height: 36px;
    background-color: #f0f0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* 5. BALKEN ANIMATION (Performance Turbo) */
.ms-code-widget-0 .bar-fill {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    box-sizing: border-box;
    width: 0;
    /* min-width: 0; kann zu Problemen führen, wenn der Inhalt größer ist als 0 */
    /* Stattdessen stellen wir sicher, dass der value-box Text nicht abgeschnitten wird */

    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0); 
    backface-visibility: hidden;
    transition: width 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Farben */
.ms-code-widget-0 .bar-fill.step-0 { background-color: #8D373B; }
.ms-code-widget-0 .bar-fill.step-1 { background-color: #A34A4D; }
.ms-code-widget-0 .bar-fill.step-2 { background-color: #B26F6B; }
.ms-code-widget-0 .bar-fill.step-3 { background-color: #798D6E; }
.ms-code-widget-0 .bar-fill.step-4 { background-color: #617D6C; }
.ms-code-widget-0 .bar-fill.step-final { 
    background-color: #3B5B50; 
    /* Hier ist eine Anpassung für den finalen Balken */
    min-width: fit-content; /* Sorgt dafür, dass der Inhalt nicht überläuft */
    padding-left: 8px; /* Zusätzliches Padding für den Text, falls er zu weit links ist */
}

.ms-code-widget-0 .value-box {
    background-color: #FFFFFF;
    color: #333;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.ms-code-widget-0 .final-price-separator {
    height: 1px;
    background-color: #e0e0e0; 
    margin: 24px 0 20px 0;
    width: 100%;
}

.ms-code-widget-0 .bar-item.final-price-item .label {
    color: #388E3C;
    font-size: 1.125rem;
    font-weight: 700;
}

/* 6. FOOTER NOTE (Klein & Hellgrau) */
.ms-code-widget-0 .footer-note {
    font-size: 0.7rem; 
    color: #999;       
    margin-top: 24px;
    text-align: left;
    line-height: 1.4;
}

/* 7. MOBILE FIX (Damit es auf dem Handy gut aussieht) */
@media (max-width: 480px) {
    .ms-code-widget-0 .infographic-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        min-height: auto;
    }
    
    .ms-code-widget-0 .savings-badge {
        margin-left: 0;
        margin-bottom: 5px;
    }
    
    .ms-code-widget-0 .total-cost {
        font-size: 2.5rem; 
    }
}
.mse-pill{display:inline-block;margin-left:8px;padding:0.1em 0.7em;border:1.5px solid var(--ms-orange);border-radius:var(--ms-radius-pill);background:var(--ms-light-orange);color:var(--ms-dark);-webkit-text-fill-color:var(--ms-dark);font-size:0.72em;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle}