/* Automatisch erzeugt von werkzeuge/code-seiten-einbetten.py aus
   bestand/elementor/waermepumpe.json.
   NICHT von Hand aendern — Aenderungen gehoeren in die Quelle. */
/* Design-Variablen der Seite (im Original auf :root) */
.wp-container{--color-cold:#3b5e8c;--color-hot:#a64454;}

  /* --- Hauptcontainer --- */
  .wp-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222; /* Sehr dunkles Grau für weicheren Kontrast als reines Schwarz */
    border-radius: 12px;
    overflow: hidden; 
    /* Ein subtiler Schatten für den Container selbst */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  }

  /* Das Hintergrundbild */
  .wp-image {
    width: 100%;
    height: auto;
    display: block;
    /* Bild etwas abdunkeln (80% Helligkeit), damit die weißen Glas-Boxen leuchten */
    filter: brightness(0.8); 
  }

  /* --- FARB-DEFINITIONEN (Variablen für einfaches Ändern) --- */
  

  /* --- Der Ring mit Verlauf --- */
  .cycle-ring-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%; /* Etwas kleiner als vorher für mehr Luft */
    padding-bottom: 72%; 
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;

    /* CONIC GRADIENT: Verlauf im Kreis */
    background: conic-gradient(
        from -90deg at 50% 50%,
        var(--color-cold) 0deg,    /* Links: Blau */
        var(--color-cold) 20deg,   
        var(--color-hot) 140deg,   /* Oben/Rechts: Wird Rot */
        var(--color-hot) 220deg,   /* Rechts/Unten: Bleibt Rot */
        var(--color-cold) 320deg,  /* Unten/Links: Wird Blau */
        var(--color-cold) 360deg   
    );

    /* Maske für das Loch in der Mitte */
    -webkit-mask: radial-gradient(transparent 68%, black 69%);
            mask: radial-gradient(transparent 68%, black 69%);
    
    /* Leichte Animation des Rings (Pulsieren), wirkt lebendiger */
    animation: gentlePulse 4s ease-in-out infinite alternate;
  }

  @keyframes gentlePulse {
      0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1.01); }
  }

  /* Der Glow hinter dem Ring */
  .cycle-ring-gradient::after {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      border-radius: 50%;
      z-index: -1;
      filter: blur(30px); /* Stärkerer Blur für mehr "Flare" */
      opacity: 0.6;
  }


  /* --- Style für die "Glassmorphism" Boxen --- */
  .wp-card {
    position: absolute;
    z-index: 10;
    
    /* DER GLAS-EFFEKT */
    background-color: rgba(255, 255, 255, 0.65); /* Sehr transparent */
    backdrop-filter: blur(20px); /* Starker Weichzeichner für den Hintergrund */
    -webkit-backdrop-filter: blur(20px); /* Safari Support */
    
    padding: 20px;
    border-radius: 16px;
    width: 220px; 
    
    /* Feiner Rand und Schatten für Tiefe */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    font-size: 14px;
    line-height: 1.5;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }

  .wp-card:hover {
    transform: scale(1.05); 
    background-color: rgba(255, 255, 255, 0.85); /* Beim Hover etwas weißer */
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 20;
  }

  .wp-card h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111;
  }
  
  /* Optional: Nummer farbig machen passend zum Schritt */
  .num-blue { color: var(--color-cold); }
  .num-red { color: var(--color-hot); }

  /* --- POSITIONIERUNG --- */
  .pos-left { top: 50%; left: 3%; transform: translateY(-50%); }
  .pos-top { top: 3%; left: 50%; transform: translateX(-50%); }
  .pos-right { top: 50%; right: 3%; transform: translateY(-50%); }
  .pos-bottom { bottom: 3%; left: 50%; transform: translateX(-50%); }

  /* Hover Fixes */
  .pos-left:hover { transform: translateY(-50%) scale(1.05); }
  .pos-top:hover { transform: translateX(-50%) scale(1.05); }
  .pos-right:hover { transform: translateY(-50%) scale(1.05); }
  .pos-bottom:hover { transform: translateX(-50%) scale(1.05); }


  /* --- RESPONSIVE (Handy) --- */
  @media (max-width: 768px) {
    .cycle-ring-gradient { display: none; }
    
    .wp-card {
      position: relative;
      width: auto;
      margin-bottom: 12px;
      transform: none !important;
      left: auto !important; top: auto !important; bottom: auto !important; right: auto !important;
      background-color: rgba(255, 255, 255, 0.9); /* Auf Handy mehr Deckkraft für Lesbarkeit */
    }
    .wp-container {
      background: #f4f4f4;
      padding: 15px;
      box-shadow: none;
    }
    .wp-image {
        border-radius: 8px;
        margin-bottom: 20px;
        filter: none;
    }
  }

#ms-tools .msf-wrap{
  --msf-dark:#1D1D1E; --msf-orange:#F3702C; --msf-orange-2:#F19028;
  --msf-turq:#1A5E5B; --msf-turq-2:#2A7C78; --msf-turq-3:#3E9591;
  --msf-white:#FFF; --msf-bg:#F5F5F3; --msf-light-orange:#FEF1EA;
  --msf-border:#E7E4E1; --msf-muted:rgba(29,29,30,.60); --msf-subtle:rgba(29,29,30,.40);
  --msf-head:'Pangea','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --msf-body:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-family:var(--msf-body)!important;
  background:var(--msf-white)!important;
  border:1px solid var(--msf-border)!important;
  border-radius:20px!important;
  box-shadow:0 4px 12px rgba(0,0,0,.05)!important;
  padding:clamp(1.5rem,4vw,2.75rem)!important;
  max-width:840px!important; margin:0 auto!important;
  box-sizing:border-box!important;
}
#ms-tools .msf-wrap *{box-sizing:border-box!important;}

/* ── Header ─────────────────────────────────────────────────────────── */
#ms-tools .msf-head{text-align:center!important;margin:0 0 2rem!important;}
#ms-tools .msf-eyebrow{
  font-family:var(--msf-body)!important;font-size:.8125rem!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  color:var(--msf-muted)!important;margin:0 0 .75rem!important;font-weight:600!important;
}
#ms-tools .msf-total{
  font-family:var(--msf-head)!important;font-weight:500!important;
  font-size:clamp(2.25rem,7vw,3.5rem)!important;line-height:1.05!important;
  margin:0 0 .625rem!important;letter-spacing:-.02em!important;
  background:linear-gradient(135deg,#F3702C 0%,#F19028 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:var(--msf-orange)!important;
  font-variant-numeric:tabular-nums!important;
}
#ms-tools .msf-badge{
  display:inline-block!important;background:var(--msf-light-orange)!important;
  color:#D75E21!important;font-weight:600!important;font-size:.9375rem!important;
  padding:.375rem 1rem!important;border-radius:999px!important;margin:0 0 .75rem!important;
  font-variant-numeric:tabular-nums!important;
}
#ms-tools .msf-sub{
  font-size:1rem!important;color:var(--msf-subtle)!important;margin:0!important;line-height:1.5!important;
}

/* ── Balken ─────────────────────────────────────────────────────────── */
#ms-tools .msf-chart{display:flex!important;flex-direction:column!important;gap:1.25rem!important;}
#ms-tools .msf-row{margin:0!important;}
#ms-tools .msf-label{
  font-family:var(--msf-body)!important;font-size:.9375rem!important;font-weight:600!important;
  color:var(--msf-dark)!important;margin:0 0 .5rem!important;line-height:1.35!important;
}
#ms-tools .msf-note{
  display:block!important;font-weight:400!important;font-size:.8125rem!important;
  color:var(--msf-subtle)!important;margin-top:.125rem!important;
}
#ms-tools .msf-track{
  background:var(--msf-bg)!important;border-radius:999px!important;
  height:44px!important;overflow:hidden!important;width:100%!important;
}
#ms-tools .msf-fill{
  height:100%!important;border-radius:999px!important;width:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  padding:0 1rem!important;transition:width 1.1s cubic-bezier(.22,1,.36,1)!important;
  min-width:132px!important;
}
#ms-tools .msf-val{
  color:var(--msf-white)!important;font-weight:600!important;font-size:.9375rem!important;
  white-space:nowrap!important;font-variant-numeric:tabular-nums!important;
  letter-spacing:.01em!important;
}
#ms-tools .msf-s0{background:var(--msf-dark)!important;}
#ms-tools .msf-s1{background:var(--msf-turq)!important;}
#ms-tools .msf-s2{background:var(--msf-turq-2)!important;}
#ms-tools .msf-s3{background:var(--msf-turq-3)!important;}
#ms-tools .msf-sfinal{background:linear-gradient(135deg,#F3702C 0%,#F19028 100%)!important;}

/* ── Endpreis ───────────────────────────────────────────────────────── */
#ms-tools .msf-sep{
  border:0!important;border-top:1px solid var(--msf-border)!important;
  margin:1.5rem 0 .25rem!important;
}
#ms-tools .msf-final .msf-label{font-size:1.0625rem!important;}
#ms-tools .msf-final .msf-track{height:56px!important;}
#ms-tools .msf-final .msf-val{font-size:1.125rem!important;}

/* ── Fußnote ────────────────────────────────────────────────────────── */
#ms-tools .msf-foot{
  margin:1.75rem 0 0!important;padding-top:1.25rem!important;
  border-top:1px solid var(--msf-border)!important;
  font-size:.8125rem!important;line-height:1.6!important;color:var(--msf-subtle)!important;
}
#ms-tools .msf-foot strong{color:var(--msf-muted)!important;font-weight:600!important;}
#ms-tools .msf-foot p{margin:0 0 .625rem!important;}
#ms-tools .msf-foot p:last-child{margin-bottom:0!important;}

@media (max-width:520px){
  #ms-tools .msf-track{height:40px!important;}
  #ms-tools .msf-final .msf-track{height:48px!important;}
  #ms-tools .msf-fill{padding:0 .75rem!important;min-width:118px!important;}
  #ms-tools .msf-val{font-size:.875rem!important;}
  #ms-tools .msf-final .msf-val{font-size:1rem!important;}
}
@media (prefers-reduced-motion:reduce){
  #ms-tools .msf-fill{transition:none!important;}
}



/* 1. BASIS-EINSTELLUNGEN */
.ms-code-widget-2 {
    font-family: 'PANGEA', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ms-code-widget-2 #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-2 .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-2 .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-2 .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-2 .subtitle {
    font-size: 1.125rem;
    font-weight: 400;
    color: #555;
    margin: 4px 0 0 0;
    width: 100%;
}

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

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

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

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

/* 5. BALKEN ANIMATION (Performance Turbo) */
.ms-code-widget-2 .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-2 .bar-fill.step-0 { background-color: #8D373B; }
.ms-code-widget-2 .bar-fill.step-1 { background-color: #A34A4D; }
.ms-code-widget-2 .bar-fill.step-2 { background-color: #B26F6B; }
.ms-code-widget-2 .bar-fill.step-3 { background-color: #798D6E; }
.ms-code-widget-2 .bar-fill.step-4 { background-color: #617D6C; }
.ms-code-widget-2 .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-2 .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-2 .final-price-separator {
    height: 1px;
    background-color: #e0e0e0; 
    margin: 24px 0 20px 0;
    width: 100%;
}

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

/* 6. FOOTER NOTE (Klein & Hellgrau) */
.ms-code-widget-2 .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-2 .infographic-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        min-height: auto;
    }
    
    .ms-code-widget-2 .savings-badge {
        margin-left: 0;
        margin-bottom: 5px;
    }
    
    .ms-code-widget-2 .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}
#ms-tools .msf-s4{background:#5BA9A5!important;}