.oek-overshoot{
  --oek-bg: #ffffff;
  --oek-fg: #111111;
  --oek-muted: #666666;
  --oek-border: rgba(0,0,0,.12);
  --oek-grid: rgba(0,0,0,.08);

  --oek-ring-1: rgba(124,179,66,.85);
  --oek-ring-2: rgba(0,0,0,.12);
  --oek-ring-3: rgba(255,99,71,.70);

  background: var(--oek-bg);
  color: var(--oek-fg);
  border: 1px solid var(--oek-border);
  border-radius: 16px;
  padding: 16px;
  max-width: 860px;
}

@media (prefers-color-scheme: dark){
  .oek-overshoot{
    --oek-bg: #0b0b0b;
    --oek-fg: #f2f2f2;
    --oek-muted: #b8b8b8;
    --oek-border: rgba(255,255,255,.14);
    --oek-grid: rgba(255,255,255,.10);
    --oek-ring-2: rgba(255,255,255,.12);
  }
}

/* Optional: falls dein Theme eine Dark-Mode Klasse nutzt */
body.dark-mode .oek-overshoot,
body.is-dark .oek-overshoot{
  --oek-bg: #0b0b0b;
  --oek-fg: #f2f2f2;
  --oek-muted: #b8b8b8;
  --oek-border: rgba(255,255,255,.14);
  --oek-grid: rgba(255,255,255,.10);
  --oek-ring-2: rgba(255,255,255,.12);
}

.oek-overshoot__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.oek-overshoot__title{
  font-size: 1.15rem;
  font-weight: 750;
}

.oek-overshoot__subtitle{
  font-size: .9rem;
  color: var(--oek-muted);
  margin-top: 2px;
}

.oek-overshoot__chip{
  font-size: .78rem;
  padding: 6px 10px;
  border: 1px solid var(--oek-border);
  border-radius: 999px;
  color: var(--oek-muted);
}

.oek-overshoot__grid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 760px){
  .oek-overshoot__grid{ grid-template-columns: 1fr; }
}

.oek-overshoot__chartWrap{
  width: 100%;
  min-height: 260px;
  position: relative;
}

.oek-overshoot__facts{
  display:grid;
  gap: 12px;
}

.oek-overshoot__fact{
  padding: 10px 12px;
  border: 1px solid var(--oek-border);
  border-radius: 12px;
}

.oek-overshoot__label{
  font-size: .85rem;
  color: var(--oek-muted);
  margin-bottom: 4px;
}

.oek-overshoot__value{
  font-size: 1.05rem;
  font-weight: 650;
}

.oek-overshoot__hint{
  font-size: .85rem;
  color: var(--oek-muted);
  margin-top: 4px;
}

.oek-overshoot__note{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--oek-border);
}

.oek-overshoot__source{
  font-size: .85rem;
  color: var(--oek-muted);
}

.oek-overshoot__source a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oek-overshoot--error{
  border-color: rgba(255,99,71,.6);
}


/* ===== Progress-Style (kräftig, volle Breite) ===== */
.oek-overshoot--chart-progress .oek-overshoot__grid{
  grid-template-columns: 1fr; /* full width */
}
.oek-overshoot--chart-progress .oek-overshoot__chartWrap{
  display:none; /* hide canvas area */
}
.oek-overshoot__progress{
  width: 100%;
  margin: 6px 0 10px 0;
}
.oek-overshoot__progressTrack{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 2px solid var(--oek-border);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .oek-overshoot__progressTrack{ background: rgba(255,255,255,.10); }
}
body.dark-mode .oek-overshoot__progressTrack,
body.is-dark .oek-overshoot__progressTrack{ background: rgba(255,255,255,.10); }

.oek-overshoot__progressFill{
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: var(--oek-ring-1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: width .6s ease;
}
.oek-overshoot--over .oek-overshoot__progressFill{
  /* bei >100%: Warn-Optik */
  background: var(--oek-ring-3);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.18) 0px,
    rgba(255,255,255,.18) 10px,
    rgba(0,0,0,.08) 10px,
    rgba(0,0,0,.08) 20px
  );
}
.oek-overshoot__progressLabel{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-size: 1.02rem;
  pointer-events:none;
}
@media (max-width: 520px){
  .oek-overshoot__progressTrack{ height: 40px; }
  .oek-overshoot__progressLabel{ font-size: .95rem; }
}

/* Make widget feel like the screenshot: bolder header spacing */
.oek-overshoot--chart-progress{
  padding: 18px;
}
.oek-overshoot--chart-progress .oek-overshoot__facts{
  margin-top: 6px;
}


/* World comparison bar: neutral / grey */
.oek-overshoot__progress--world .oek-overshoot__progressFill{
  background: rgba(120,120,120,.85);
}


/* ===== Ökonerd-Style (Progress, kräftig, max width) ===== */
.oek-overshoot--chart-progress{
  max-width: none;
  width: 100%;
  border-radius: 10px;
  padding: 22px;
  border: 0;
  background: #9f9f9f;
}

@media (prefers-color-scheme: dark){
  .oek-overshoot--chart-progress{
    background: #0f1216;
    border: 1px solid var(--oek-border);
  }
}
body.dark-mode .oek-overshoot--chart-progress,
body.is-dark .oek-overshoot--chart-progress{
  background: #0f1216;
  border: 1px solid var(--oek-border);
}

.oek-overshoot--chart-progress .oek-overshoot__title{
  color: #fff;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: .2px;
}
.oek-overshoot--chart-progress .oek-overshoot__subtitle{
  color: rgba(255,255,255,.85);
}
body.dark-mode .oek-overshoot--chart-progress .oek-overshoot__subtitle,
body.is-dark .oek-overshoot--chart-progress .oek-overshoot__subtitle,
@media (prefers-color-scheme: dark){
  .oek-overshoot--chart-progress .oek-overshoot__subtitle{ color: var(--oek-muted); }
}

.oek-overshoot--chart-progress .oek-overshoot__chip{
  display:none;
}

.oek-overshoot--chart-progress .oek-overshoot__grid{
  grid-template-columns: 1fr;
}
.oek-overshoot--chart-progress .oek-overshoot__chartWrap{
  display:none;
}

.oek-overshoot__bars{
  display:grid;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 14px;
}

.oek-overshoot__progressTrack{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: #d7d7d7;
  border: 1px solid rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .oek-overshoot__progressTrack{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
  }
}
body.dark-mode .oek-overshoot__progressTrack,
body.is-dark .oek-overshoot__progressTrack{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

.oek-overshoot__progressFill{
  height: 100%;
  width: 0%;
  border-radius: 10px;
  transition: width .6s ease;
}

/* Auto-Farbskala */
.oek-scale--green .oek-overshoot__progressFill{ background: #1c9c2b; }
.oek-scale--yellow .oek-overshoot__progressFill{ background: #ffea00; }
.oek-scale--red .oek-overshoot__progressFill{ background: #e10600; }

.oek-overshoot__progressLabel{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  font-size: 1.02rem;
  pointer-events:none;
}

/* Vergleichsbalken etwas "neutraler" */
.oek-overshoot__progress--world.oek-scale--green .oek-overshoot__progressFill,
.oek-overshoot__progress--world.oek-scale--yellow .oek-overshoot__progressFill,
.oek-overshoot__progress--world.oek-scale--red .oek-overshoot__progressFill{
  filter: saturate(.7) brightness(.95);
}
.oek-overshoot__progress--eu .oek-overshoot__progressFill{
  filter: saturate(.85);
}

/* Tooltip */
.oek-overshoot__tip{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  position: relative;
  user-select:none;
}
.oek-overshoot__tipIcon{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(0,0,0,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}
.oek-overshoot__tipLabel{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
@media (prefers-color-scheme: dark){
  .oek-overshoot__tipLabel{ color: var(--oek-muted); }
  .oek-overshoot__tipIcon{ background: rgba(255,255,255,.08); }
}
body.dark-mode .oek-overshoot__tipLabel,
body.is-dark .oek-overshoot__tipLabel{ color: var(--oek-muted); }
body.dark-mode .oek-overshoot__tipIcon,
body.is-dark .oek-overshoot__tipIcon{ background: rgba(255,255,255,.08); }

.oek-overshoot__tipBubble{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(520px, 90vw);
  background: #111;
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-size: .95rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
}
.oek-overshoot__tip:hover .oek-overshoot__tipBubble{
  opacity: 1;
  transform: translateY(0);
}

/* Facts cards cleaner on progress panel */
.oek-overshoot--chart-progress .oek-overshoot__fact{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.22);
}
@media (prefers-color-scheme: dark){
  .oek-overshoot--chart-progress .oek-overshoot__fact{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
  }
}
body.dark-mode .oek-overshoot--chart-progress .oek-overshoot__fact,
body.is-dark .oek-overshoot--chart-progress .oek-overshoot__fact{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}