/* ==========================================================================
   KI-Section C – Frühwarnsystem (Prognose) · Figma node 45:2
   Setzt shared.css voraus (Tokens + .lx-cta).
   ========================================================================== */

.ki-forecast {
  position: relative;
  overflow: hidden;
  background: var(--lx-white);
  font-family: var(--lx-font-text);
}

.ki-forecast__inner {
  display: grid;
  grid-template-columns: 760px 610px;
  column-gap: 230px;
  align-items: start;
  max-width: var(--lx-content-max);
  margin: 0 auto;
  padding: 88px var(--lx-gutter) 80px;
}

/* --- Linke Spalte ---------------------------------------------------------- */

.ki-forecast__eyebrow {
  margin: 0;
  color: var(--lx-green);
  font-size: var(--lx-size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--lx-tracking-eyebrow);
  text-transform: uppercase;
}

.ki-forecast__title {
  margin: 18px 0 0;
  color: var(--lx-green-dark);
  font-family: var(--lx-font-display);
  font-size: var(--lx-size-headline);
  font-weight: 800;
  line-height: var(--lx-leading-headline);
}

.ki-forecast__lead {
  max-width: 760px;
  margin: 28px 0 0;
  color: var(--lx-text-body);
  font-size: var(--lx-size-lead);
  line-height: var(--lx-leading-lead);
}

.ki-forecast__cta {
  margin-top: 64px;
  background: var(--lx-green);
  color: var(--lx-white);
  box-shadow: var(--lx-shadow-cta);
}

.ki-forecast__cta:hover {
  background: #0c8b4d;
  box-shadow: 0 14px 30px rgba(14, 158, 88, 0.42);
}

.ki-forecast__note {
  margin: 17px 0 0;
  color: var(--lx-text-muted);
  font-size: var(--lx-size-note);
}

/* --- Kennzahlen rechts ------------------------------------------------------ */

.ki-forecast__stats {
  display: flex;
  flex-direction: column;
  gap: 43px;
  margin: 42px 0 0;
}

.ki-forecast__stat {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ki-forecast__stat-value {
  flex: 0 0 auto;
  color: var(--lx-green);
  font-family: var(--lx-font-display);
  font-size: var(--lx-size-headline);
  font-weight: 800;
  line-height: normal;
}

.ki-forecast__stat-text {
  max-width: 300px;
  margin: 0;
  color: var(--lx-text-body);
  font-size: 17px;
  line-height: 1.45;
}

/* --- Prognose-Dashboard ----------------------------------------------------- */

.ki-forecast__board {
  position: relative;
  grid-column: 1 / -1;
  margin-top: 51px;
}

.ki-forecast__dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 36px;
  border-radius: var(--lx-radius-card);
  background: var(--lx-bg-mint);
  box-shadow: var(--lx-shadow-dashboard);
}

.ki-forecast__dashboard-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.ki-forecast__dashboard-title {
  margin: 0;
  color: var(--lx-green-dark);
  font-size: 20px;
  font-weight: 700;
}

.ki-forecast__legend {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ki-forecast__legend-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--lx-text-muted);
  font-size: 13px;
}

.ki-forecast__legend-dot {
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.ki-forecast__legend-item--ist .ki-forecast__legend-dot {
  background-image: url("assets/2a2cd528-a28d-4204-a1ef-708fc70a0387.svg");
}

.ki-forecast__legend-item--prognose .ki-forecast__legend-dot {
  background-image: url("assets/ac43e421-a933-4819-b65d-1412de961abc.svg");
}

.ki-forecast__legend-item--engpass .ki-forecast__legend-dot {
  background-image: url("assets/7386b56c-e8ce-40ac-a344-a61e5e33f2db.svg");
}

.ki-forecast__chart {
  width: 100%;
  aspect-ratio: 1528 / 280;
  background-image: url("assets/5df41e38-a3e5-4927-a381-5ca15922c368.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* --- Alerts über dem Dashboard ----------------------------------------------
   Prozentual zum Board positioniert, damit sie beim Skalieren an derselben
   Stelle der Kurve sitzen bleiben.
   -------------------------------------------------------------------------- */

.ki-forecast__alerts {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* width: max-content hält jede Pille einzeilig, solange der Platz reicht;
   die max-width je Pille (100% − left-Versatz) zwingt sie zum Umbrechen,
   bevor sie rechts über das Dashboard hinausragt. white-space: nowrap stünde
   dem entgegen — dann ragte die Engpass-Pille ab ~1100 px Fensterbreite aus
   dem Board. */
.ki-forecast__alert {
  position: absolute;
  width: max-content;
  padding: 10px 16px;
  border-radius: var(--lx-radius-task);
  box-shadow: var(--lx-shadow-alert);
  font-size: var(--lx-size-note);
  font-weight: 700;
}

.ki-forecast__alert--heute {
  max-width: calc(98% - 27.5%);
  top: 10.53%;
  left: 27.5%;
  background: var(--lx-green-dark);
  color: var(--lx-white);
}

.ki-forecast__alert--pruefung {
  max-width: calc(98% - 5%);
  top: 23.63%;
  left: 5%;
  transform: rotate(-2deg);
  background: var(--lx-yellow);
  color: var(--lx-green-dark);
}

.ki-forecast__alert--ruecklage {
  max-width: calc(98% - 70%);
  top: 18.77%;
  left: 70%;
  transform: rotate(-1deg);
  background: var(--lx-green);
  color: var(--lx-white);
}

.ki-forecast__alert--engpass {
  max-width: calc(98% - 46.17%);
  top: 42.11%;
  left: 46.17%;
  transform: rotate(2deg);
  background: var(--lx-red);
  color: var(--lx-white);
}

/* --- Responsiv -------------------------------------------------------------- */

@media (max-width: 1919px) {
  .ki-forecast__inner {
    grid-template-columns: minmax(0, 760px) minmax(0, 610px);
    column-gap: 64px;
    padding-right: 80px;
    padding-left: 80px;
  }
}

@media (max-width: 1279px) {
  .ki-forecast__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .ki-forecast__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 48px;
  }

  .ki-forecast__stat {
    flex: 1 1 380px;
  }

  .ki-forecast__title {
    font-size: 52px;
  }

  .ki-forecast__stat-value {
    font-size: 48px;
  }
}

/* Ab hier tragen die Alerts nicht mehr als Überlagerung — sie würden sich
   gegenseitig und die Kurve verdecken. Sie rücken deshalb unter das
   Dashboard und werden zu einer normalen Liste. */
@media (max-width: 1023px) {
  .ki-forecast__alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  .ki-forecast__alert {
    position: static;
    transform: none;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .ki-forecast__inner {
    padding: 64px 32px;
  }

  .ki-forecast__title {
    font-size: 40px;
  }

  .ki-forecast__lead {
    font-size: 18px;
  }

  .ki-forecast__cta {
    width: 100%;
    margin-top: 40px;
    padding: 15px 24px;
    font-size: 20px;
  }

  .ki-forecast__stats {
    flex-direction: column;
    gap: 28px;
    margin-top: 40px;
  }

  /* In der Spaltenrichtung würde die Flex-Basis aus der Tablet-Regel auf die
     Höhe wirken und die Kennzahlen auseinanderreißen. */
  .ki-forecast__stat {
    flex: 0 0 auto;
  }

  .ki-forecast__stat-value {
    font-size: 40px;
  }

  .ki-forecast__dashboard {
    padding: 22px 20px;
  }

  .ki-forecast__dashboard-title {
    font-size: 17px;
  }

  /* Die Kurve braucht Breite, sonst wird sie unlesbar flach. Unterhalb der
     Tablet-Breite darf sie deshalb seitlich scrollen. */
  .ki-forecast__chart {
    width: 680px;
    max-width: none;
  }

  .ki-forecast__chart-scroll {
    overflow-x: auto;
  }
}

@media (max-width: 479px) {
  .ki-forecast__inner {
    padding: 48px 20px;
  }

  .ki-forecast__title {
    font-size: 32px;
  }

  .ki-forecast__stat {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .ki-forecast__dashboard {
    padding: 18px 16px;
  }
}