/* ===========================
   OeNB KPI Box Styles
   =========================== */
.oenb-box {
  background: linear-gradient(135deg, rgba(0, 66, 137, 0.10) 0%, rgba(0, 66, 137, 0.10) 100%);
  padding: 20px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.oenb-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.30);
}

.oenb-title {
  color: #004289;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.oenb-value {
  color: #004289;
  font-size: 1.125rem;
  font-weight: 300;
  margin-bottom: 2px;
}

.oenb-subvalue {
  color: #004289;
  font-size: 1.125rem;
  font-weight: 300;
  margin-bottom: 8px;
}

.oenb-subtitle {
  color: #004289;
  font-size: 1rem;
  font-weight: 300;
}

/* ===========================
   Info Icon Styles
   =========================== */
.oenb-info-icon {
  position: absolute;
  top : 8px; /*bottom: 8px; */
  left: 8px; /* right: 8px;*/
  cursor: pointer;
}

.oenb-info-icon svg {
  width: 16px;
  height: 16px;
  color: #004289;
}

/* ===========================
   Overlay Styles
   =========================== */
.oenb-info-overlay {
  position: absolute;
  top: 28px; /*bottom: 28px; /* über dem Icon */
  left: 8px;/*right: 8px;*/
  background: #ffffff;
  border: 1px solid rgba(0, 66, 137, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  font-size: 0.75rem;
  color: #004289;
  padding: 8px 12px;
   /*max-width: 220px;*/
  display: none; /* Standard: unsichtbar */
  z-index: 10;
  /*transition: opacity 0.2s ease; 
  opacity: 0; */
}


.oenb-info-icon:hover .oenb-info-overlay {
  display: block;
  /*opacity: 1;*/
}

/* Aktiviert durch JS /*durch Klicken statt hovern :)
.oenb-info-overlay.show-info {
  display: block;
  opacity: 1;
}*/


/* ===========================
   PlotBands
   =========================== */
   
/* PlotBand für Leitlinie */
.highcharts-plot-band-ll {
  fill: #FFFFFF !important;    
  opacity: 0.8;                /* leicht transparent */
}

/* PlotBand für Exuberanz */
.highcharts-plot-band-exub {
  fill:  rgba(211, 106, 95, 0.3) !important;  
  opacity: 0.8;
}


