.epfk-scale-wrap,.epfk-scale-wrap *{box-sizing:border-box}.epfk-scale-wrap{
  width:100%;
  height:100%;
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
}.epfk-scale{
  margin:auto;
--epfk-end-x:0%;--epfk-primary-x:0%;width:620px;max-width:100%;font-family:var(--epfk-font,Inter,Arial,sans-serif);color:#111827;position:relative;padding-top:58px;padding-bottom:72px}.epfk-info{position:absolute;z-index:20;display:flex;flex-direction:column;gap:3px;line-height:1.15;font-weight:800;white-space:nowrap}.epfk-info-end{top:0;left:clamp(6px,calc(var(--epfk-end-x) + 24px),52%)}.epfk-info-primary{bottom:0;left:clamp(6px,calc(var(--epfk-primary-x) + 24px),52%)}.epfk-title{font-size:12px;font-weight:400}.epfk-measure{display:flex;align-items:center;gap:8px}.epfk-value{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:24px;padding:0 8px;border-radius:5px;background:#e5e7eb;font-size:13px;font-weight:900}.epfk-unit{font-size:11px;font-weight:900}.epfk-arrow{position:absolute;z-index:12;width:calc(var(--epfk-arrow-head-width,12px)*2);height:calc(var(--epfk-arrow-stem-height,22px) + var(--epfk-arrow-head-height,16px));left:0;transform:translateX(-50%);pointer-events:none}.epfk-arrow::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:8px;height:var(--epfk-arrow-stem-height,22px);background:#555;border-radius:3px}.epfk-arrow::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-left:var(--epfk-arrow-head-width,12px) solid transparent;border-right:var(--epfk-arrow-head-width,12px) solid transparent}.epfk-arrow-end{top:var(--epfk-arrow-top-y,30px);left:var(--epfk-end-x)}.epfk-arrow-primary{top:calc(58px + 32px + 28px + var(--epfk-arrow-bottom-y,38px));left:var(--epfk-primary-x)}.epfk-arrow-end::before{top:0}.epfk-arrow-end::after{top:calc(var(--epfk-arrow-stem-height,22px) - 2px);border-top:var(--epfk-arrow-head-height,16px) solid #555}.epfk-arrow-primary::before{bottom:0}.epfk-arrow-primary::after{bottom:calc(var(--epfk-arrow-stem-height,22px) - 2px);border-bottom:var(--epfk-arrow-head-height,16px) solid #555}.epfk-bar{display:flex;width:100%;height:32px;overflow:hidden;border:0;border-bottom:0;border-radius:14px 14px 0 0;background:#fff}.epfk-seg{flex:0 0 var(--epfk-width,10%);min-width:0;height:32px;display:flex;align-items:center;justify-content:center;border-right:0;font-size:13px;font-weight:900;line-height:1;white-space:nowrap;background:var(--epfk-seg-color,transparent)}.epfk-seg:last-child{border-right:0}.epfk-smooth-colors .epfk-bar{background:var(--epfk-gradient)}.epfk-smooth-colors .epfk-seg{background:transparent!important}.epfk-seg.is-active{box-shadow:none;font-size:16px}.epfk-axis{position:relative;width:100%;height:var(--epfk-axis-height,28px);margin:var(--epfk-axis-margin-top,5px) 0 var(--epfk-axis-margin-bottom,5px) 0}.epfk-axis span{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:800;white-space:nowrap}.epfk-axis span:first-child{transform:translate(0,-50%)}.epfk-axis span:last-child{transform:translate(-100%,-50%)}.epfk-gradient{width:100%;height:30px;border:0;border-top:0;border-radius:0 0 14px 14px;background:var(--epfk-gradient,linear-gradient(90deg,#19e832 0%,#fff000 50%,#c81717 100%))}.epfk-debug-panel{margin-top:14px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#111827;font-size:12px;line-height:1.45;text-align:left}.epfk-debug-panel code{display:inline-block;padding:1px 5px;border-radius:4px;background:#e5e7eb;color:#111827}@media(max-width:768px){.epfk-scale{padding-top:70px;padding-bottom:84px}.epfk-info{white-space:normal;max-width:70%}.epfk-title{font-size:12px}.epfk-unit{font-size:11px}.epfk-bar,.epfk-seg{height:26px}.epfk-seg{font-size:10px;border-right-width:0}.epfk-seg.is-active{font-size:12px;box-shadow:none}.epfk-axis span{font-size:9px}}

/* EVR 1.0.300 Backend-Schriftgrößen und Pfeilgröße */
.epfk-info-end .epfk-title{font-size:var(--epfk-title-end-font-size,12px)!important;}
.epfk-info-primary .epfk-title{font-size:var(--epfk-title-primary-font-size,12px)!important;}
.epfk-value{font-size:var(--epfk-value-font-size,13px)!important;}
.epfk-unit{font-size:var(--epfk-unit-font-size,11px)!important;}
.epfk-arrow::before{width:var(--epfk-arrow-stem-width,8px)!important;}

/* EVR 1.0.300: Backend-Schriftgrößen und Pfeile zuverlässig anwenden */
.epfk-info-end .epfk-title{font-size:var(--epfk-title-end-font-size,12px)!important;}
.epfk-info-primary .epfk-title{font-size:var(--epfk-title-primary-font-size,12px)!important;}
.epfk-value{font-size:var(--epfk-value-font-size,13px)!important;}
.epfk-unit{font-size:var(--epfk-unit-font-size,11px)!important;}
.epfk-arrow::before{width:var(--epfk-arrow-stem-width,8px)!important;}
.epfk-arrow-end{left:clamp(var(--epfk-arrow-head-width,12px),var(--epfk-end-x),calc(100% - var(--epfk-arrow-head-width,12px)))!important;}
.epfk-arrow-primary{left:clamp(var(--epfk-arrow-head-width,12px),var(--epfk-primary-x),calc(100% - var(--epfk-arrow-head-width,12px)))!important;}

/* EVR 1.0.300 Frontend-Darstellung stabilisieren */
.epfk-scale {
  color: #111827 !important;
  padding-top: 58px;
  padding-bottom: 72px;
}
.epfk-info {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111827 !important;
}
.epfk-title,
.epfk-value,
.epfk-unit,
.epfk-axis span,
.epfk-seg {
  color: #111827 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.epfk-title {
  font-weight: 400 !important;
  line-height: 1.15 !important;
}
.epfk-value {
  min-width: 58px !important;
  min-height: 28px !important;
  height: auto !important;
  line-height: 1.2 !important;
}
.epfk-arrow {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.epfk-arrow::before {
  background: #555 !important;
}
.epfk-arrow-end::after {
  border-top-color: #555 !important;
}
.epfk-arrow-primary::after {
  border-bottom-color: #555 !important;
}
.epfk-bar,
.epfk-seg {
  height: 32px !important;
}
.epfk-seg {
  font-size: 13px !important;
  line-height: 1 !important;
}
.epfk-axis span {
  font-size: 12px !important;
  line-height: 1 !important;
}



/* EVR 1.0.300: Backend-Einstellungen im Frontend erzwingen */
.epfk-info-end .epfk-title{font-size:var(--epfk-title-end-font-size,12px)!important;}
.epfk-info-primary .epfk-title{font-size:var(--epfk-title-primary-font-size,12px)!important;}
.epfk-value{font-size:var(--epfk-value-font-size,13px)!important;}
.epfk-unit{font-size:var(--epfk-unit-font-size,11px)!important;}
.epfk-arrow::before{width:var(--epfk-arrow-stem-width,8px)!important;height:var(--epfk-arrow-stem-height,22px)!important;}
.epfk-arrow::after{border-left-width:var(--epfk-arrow-head-width,12px)!important;border-right-width:var(--epfk-arrow-head-width,12px)!important;}
.epfk-arrow-end::after{border-top-width:var(--epfk-arrow-head-height,16px)!important;}
.epfk-arrow-primary::after{border-bottom-width:var(--epfk-arrow-head-height,16px)!important;}
.epfk-axis{height:var(--epfk-axis-height,28px)!important;margin-top:var(--epfk-axis-margin-top,5px)!important;margin-bottom:var(--epfk-axis-margin-bottom,5px)!important;}

/* EVR 1.0.300: schwarze Trennlinien zwischen den Klassen */
.epfk-seg {
  position: relative;
}

.epfk-seg:not(:last-child) {
  border-right: 1px solid #111827 !important;
}



/* 1.0.300 Mobile: Skala scrollbar statt abgeschnitten */
@media (max-width: 760px) {
  .enerval-kennwert-skala,
  .kennwert-skala,
  .evr-kennwert-skala {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .enerval-kennwert-skala-inner,
  .kennwert-skala-inner,
  .evr-kennwert-skala-inner,
  .evr-scale-inner,
  .evr-scale-bar {
    min-width: 620px !important;
  }
}


/* 1.0.300 Mobile: Kennwertskala nicht breiter als Container */
@media (max-width: 760px) {
  .epfk-scale-wrap,
  .epfk-scale,
  .epfk-bar,
  .epfk-gradient,
  .epfk-axis {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* v1.0.302: Skala-Texte am Pfeilstumpf zentrieren
   Endenergie: Textblock über dem oberen Pfeil.
   Primärenergie: Textblock unter dem unteren Pfeil.
*/
.epfk-info {
  align-items: center !important;
  text-align: center !important;
}

.epfk-info-end {
  left: var(--epfk-end-x) !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

.epfk-info-primary {
  left: var(--epfk-primary-x) !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}

.epfk-measure {
  justify-content: center !important;
  white-space: nowrap !important;
}

.epfk-title {
  white-space: nowrap !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .epfk-info {
    max-width: none !important;
    white-space: nowrap !important;
  }

  .epfk-info-end,
  .epfk-info-primary {
    left: var(--epfk-end-x) !important;
    transform: translateX(-50%) !important;
  }

  .epfk-info-primary {
    left: var(--epfk-primary-x) !important;
  }

  .epfk-title,
  .epfk-measure,
  .epfk-unit,
  .epfk-value {
    white-space: nowrap !important;
  }
}


/* v1.0.303: Y-Abstand Schrift zum Pfeil einstellbar */
.epfk-info-end {
  top: calc(0px - var(--epfk-text-gap-top-desktop, 0px)) !important;
}

.epfk-info-primary {
  bottom: calc(0px - var(--epfk-text-gap-bottom-desktop, 0px)) !important;
}

@media (max-width: 768px) {
  .epfk-info-end {
    top: calc(0px - var(--epfk-text-gap-top-responsive, 0px)) !important;
  }

  .epfk-info-primary {
    bottom: calc(0px - var(--epfk-text-gap-bottom-responsive, 0px)) !important;
  }
}


/* v1.0.306: Optischer Pfeilversatz ohne Kennwertänderung */
.epfk-arrow-end,
.epfk-info-end {
  left: clamp(
    var(--epfk-arrow-head-width, 12px),
    calc(var(--epfk-end-x) + var(--epfk-arrow-visual-offset-top-desktop, 0px)),
    calc(100% - var(--epfk-arrow-head-width, 12px))
  ) !important;
}

.epfk-arrow-primary,
.epfk-info-primary {
  left: clamp(
    var(--epfk-arrow-head-width, 12px),
    calc(var(--epfk-primary-x) + var(--epfk-arrow-visual-offset-bottom-desktop, 0px)),
    calc(100% - var(--epfk-arrow-head-width, 12px))
  ) !important;
}

@media (max-width: 768px) {
  .epfk-arrow-end,
  .epfk-info-end {
    left: clamp(
      var(--epfk-arrow-head-width, 12px),
      calc(var(--epfk-end-x) + var(--epfk-arrow-visual-offset-top-responsive, 0px)),
      calc(100% - var(--epfk-arrow-head-width, 12px))
    ) !important;
  }

  .epfk-arrow-primary,
  .epfk-info-primary {
    left: clamp(
      var(--epfk-arrow-head-width, 12px),
      calc(var(--epfk-primary-x) + var(--epfk-arrow-visual-offset-bottom-responsive, 0px)),
      calc(100% - var(--epfk-arrow-head-width, 12px))
    ) !important;
  }
}


/* v1.0.308: Unterer Pfeil Live-Versatz final erzwingen
   Wichtig: diese Regeln stehen absichtlich ganz am Ende und überschreiben ältere Clamp-Regeln. */
.epfk-scale .epfk-arrow-primary,
.epfk-scale .epfk-info-primary {
  left: clamp(
    var(--epfk-arrow-head-width, 12px),
    calc(var(--epfk-primary-x) + var(--epfk-arrow-visual-offset-bottom-desktop, 0px)),
    calc(100% - var(--epfk-arrow-head-width, 12px))
  ) !important;
  transform: translateX(-50%) !important;
}

.epfk-scale .epfk-arrow-end,
.epfk-scale .epfk-info-end {
  left: clamp(
    var(--epfk-arrow-head-width, 12px),
    calc(var(--epfk-end-x) + var(--epfk-arrow-visual-offset-top-desktop, 0px)),
    calc(100% - var(--epfk-arrow-head-width, 12px))
  ) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 768px) {
  .epfk-scale .epfk-arrow-primary,
  .epfk-scale .epfk-info-primary {
    left: clamp(
      var(--epfk-arrow-head-width, 12px),
      calc(var(--epfk-primary-x) + var(--epfk-arrow-visual-offset-bottom-responsive, 0px)),
      calc(100% - var(--epfk-arrow-head-width, 12px))
    ) !important;
    transform: translateX(-50%) !important;
  }

  .epfk-scale .epfk-arrow-end,
  .epfk-scale .epfk-info-end {
    left: clamp(
      var(--epfk-arrow-head-width, 12px),
      calc(var(--epfk-end-x) + var(--epfk-arrow-visual-offset-top-responsive, 0px)),
      calc(100% - var(--epfk-arrow-head-width, 12px))
    ) !important;
    transform: translateX(-50%) !important;
  }
}


/* v1.0.309: Schrift-Live-Fix final absichern */
.epfk-scale .epfk-info-end,
.epfk-scale .epfk-info-primary {
  text-align: center !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.epfk-scale .epfk-info-end {
  top: calc(0px - var(--epfk-text-gap-top-desktop, 0px)) !important;
}

.epfk-scale .epfk-info-primary {
  bottom: calc(0px - var(--epfk-text-gap-bottom-desktop, 0px)) !important;
}

.epfk-scale .epfk-info-end .epfk-title,
.epfk-scale .epfk-info-primary .epfk-title,
.epfk-scale .epfk-measure,
.epfk-scale .epfk-unit {
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .epfk-scale .epfk-info-end {
    top: calc(0px - var(--epfk-text-gap-top-responsive, 0px)) !important;
  }

  .epfk-scale .epfk-info-primary {
    bottom: calc(0px - var(--epfk-text-gap-bottom-responsive, 0px)) !important;
  }
}


/* v1.0.310: Optischer Pfeilversatz ist Y/oben-unten, nicht X.
   Horizontal bleibt Pfeil + Text am echten Kennwert zentriert. */
.epfk-scale .epfk-arrow-end {
  left: var(--epfk-end-x) !important;
  top: calc(var(--epfk-arrow-top-y, 30px) + var(--epfk-arrow-visual-offset-top-desktop, 0px)) !important;
  transform: translateX(-50%) !important;
}

.epfk-scale .epfk-info-end {
  left: var(--epfk-end-x) !important;
  top: calc(0px + var(--epfk-arrow-visual-offset-top-desktop, 0px) - var(--epfk-text-gap-top-desktop, 0px)) !important;
  transform: translateX(-50%) !important;
}

.epfk-scale .epfk-arrow-primary {
  left: var(--epfk-primary-x) !important;
  top: calc(58px + 32px + 28px + var(--epfk-arrow-bottom-y, 38px) + var(--epfk-arrow-visual-offset-bottom-desktop, 0px)) !important;
  transform: translateX(-50%) !important;
}

.epfk-scale .epfk-info-primary {
  left: var(--epfk-primary-x) !important;
  bottom: calc(0px - var(--epfk-arrow-visual-offset-bottom-desktop, 0px) - var(--epfk-text-gap-bottom-desktop, 0px)) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 768px) {
  .epfk-scale .epfk-arrow-end {
    left: var(--epfk-end-x) !important;
    top: calc(var(--epfk-arrow-top-y, 30px) + var(--epfk-arrow-visual-offset-top-responsive, 0px)) !important;
  }

  .epfk-scale .epfk-info-end {
    left: var(--epfk-end-x) !important;
    top: calc(0px + var(--epfk-arrow-visual-offset-top-responsive, 0px) - var(--epfk-text-gap-top-responsive, 0px)) !important;
  }

  .epfk-scale .epfk-arrow-primary {
    left: var(--epfk-primary-x) !important;
    top: calc(58px + 32px + 28px + var(--epfk-arrow-bottom-y, 38px) + var(--epfk-arrow-visual-offset-bottom-responsive, 0px)) !important;
  }

  .epfk-scale .epfk-info-primary {
    left: var(--epfk-primary-x) !important;
    bottom: calc(0px - var(--epfk-arrow-visual-offset-bottom-responsive, 0px) - var(--epfk-text-gap-bottom-responsive, 0px)) !important;
  }
}














/* v1.0.372: Energieverbrauchsskala wirklich vertikal im grünen Block zentrieren */
@media (min-width: 769px) {
  fieldset:has(.epfk-scale-wrap),
  .wsf-field-wrapper:has(.epfk-scale-wrap),
  .wsf-field:has(.epfk-scale-wrap),
  .epfk-scale-field,
  .epfk-scale-box,
  .epfk-scale-container,
  .epfk-scale-section {
    min-height: 520px !important;
    height: 520px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  fieldset:has(.epfk-scale-wrap) > legend,
  fieldset:has(.epfk-scale-wrap) > .wsf-legend,
  fieldset:has(.epfk-scale-wrap) > h1,
  fieldset:has(.epfk-scale-wrap) > h2,
  fieldset:has(.epfk-scale-wrap) > h3 {
    flex: 0 0 auto !important;
  }

  .epfk-scale-wrap {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    transform: none !important;
  }

  .epfk-scale-wrap .epfk-scale {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: translateY(var(--epfk-scale-offset-desktop, 0px)) !important;
  }
}

@media (max-width: 768px) {
  .epfk-scale-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  .epfk-scale-wrap .epfk-scale {
    transform: translateY(var(--epfk-scale-offset-responsive, 0px)) !important;
  }
}

/* v1.0.376: Mobile Skala darf Beschriftungen nicht abschneiden */
@media (max-width: 768px) {
  .epfk-scale-wrap,
  .epfk-scale {
    overflow: visible !important;
  }
}