/* ==========================================================================
   KI-Section B – Der KI-Agent (Autopilot) · Figma node 44:2
   Setzt shared.css voraus (Tokens + .lx-cta).
   ========================================================================== */

.ki-agent {
  position: relative;
  overflow: hidden;
  background: var(--lx-green-deepest);
  font-family: var(--lx-font-text);
}

/* Deko-Konturen. Ein einziges SVG über die volle Sektionsfläche. */
.ki-agent__deko {
  position: absolute;
  inset: 0;
  background-image: url("assets/707affe3-db17-495b-b907-ce04122a5d6e.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.ki-agent__inner {
  position: relative;
  display: grid;
  grid-template-columns: 740px 680px;
  column-gap: 160px;
  align-items: start;
  max-width: var(--lx-content-max);
  margin: 0 auto;
  padding: 96px var(--lx-gutter) 135px;
}

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

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

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

.ki-agent__lead {
  max-width: 740px;
  margin: 27px 0 0;
  color: var(--lx-text-body-dark);
  font-size: var(--lx-size-lead);
  line-height: var(--lx-leading-lead);
}

.ki-agent__facts {
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.ki-agent__fact {
  display: flex;
  gap: 13px;
  align-items: baseline;
}

.ki-agent__fact-icon {
  flex: 0 0 auto;
  color: var(--lx-green-bright);
  font-size: 19px;
  font-weight: 700;
}

.ki-agent__fact-text {
  color: var(--lx-text-body-dark);
  font-size: 17px;
  line-height: 1.35;
}

.ki-agent__fact-label {
  color: var(--lx-white);
  font-weight: 700;
}

.ki-agent__cta {
  margin-top: 55px;
  background: var(--lx-green-bright);
  color: var(--lx-green-deepest);
  box-shadow: var(--lx-shadow-cta-glow);
}

.ki-agent__cta:hover {
  background: #24d46e;
  box-shadow: 0 0 40px rgba(1, 190, 86, 0.65);
}

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

/* --- Agent-Konsole --------------------------------------------------------- */

.ki-agent__console {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
  padding: 30px 32px;
  border: 1px solid var(--lx-green-bright);
  border-radius: var(--lx-radius-card);
  background: var(--lx-green-console);
  box-shadow: var(--lx-shadow-console);
}

.ki-agent__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ki-agent__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--lx-radius-pill);
  background: var(--lx-green-bright);
  color: var(--lx-green-deepest);
  font-size: 20px;
}

.ki-agent__head-texts {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ki-agent__console-title {
  margin: 0;
  color: var(--lx-white);
  font-size: 21px;
  font-weight: 700;
  /* „Monatsabschluss" ist bei 320 px breiter als die Spalte — ohne
     Worttrennung ragt der Titel aus der Konsole. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.ki-agent__console-meta {
  color: var(--lx-text-muted-dark);
  font-size: 13px;
}

.ki-agent__progress {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--lx-radius-bubble);
  background: var(--lx-green-bright);
  color: var(--lx-green-deepest);
  font-size: 15px;
  font-weight: 700;
}

.ki-agent__tasks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ki-agent__task {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--lx-radius-task);
  background: var(--lx-green-deepest);
}

.ki-agent__task-icon {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
}

.ki-agent__task-lines {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ki-agent__task-title {
  color: var(--lx-white);
  font-size: 16px;
  font-weight: 700;
}

.ki-agent__task-meta {
  color: var(--lx-text-muted-dark);
  font-size: 13px;
}

.ki-agent__status {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid currentcolor;
  border-radius: var(--lx-radius-status);
  font-size: 12px;
  font-weight: 700;
}

/* Statusfarben. Icon und Pille teilen sich die Farbe des Zustands. */
.ki-agent__task--erledigt .ki-agent__task-icon,
.ki-agent__task--erledigt .ki-agent__status {
  color: var(--lx-green-bright);
}

.ki-agent__task--laeuft .ki-agent__task-icon,
.ki-agent__task--laeuft .ki-agent__status {
  color: var(--lx-amber);
}

.ki-agent__task--freigabe .ki-agent__task-icon,
.ki-agent__task--freigabe .ki-agent__status {
  color: var(--lx-orange);
}

/* Der laufende Vorgang dreht sein Symbol — das Design zeichnet dafür einen
   Kreispfeil. Bei reduzierter Bewegung bleibt es stehen. */
.ki-agent__task--laeuft .ki-agent__task-icon {
  display: inline-block;
  animation: ki-agent-dreht 2.4s linear infinite;
}

@keyframes ki-agent-dreht {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ki-agent__task--laeuft .ki-agent__task-icon {
    animation: none;
  }
}

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

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

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

@media (max-width: 1180px) {
  /* Einspaltig ist die Sektion deutlich höher als der 1920 × 860 große
     Deko-Rahmen — gestreckt würde daraus ein Band. Deshalb hier
     proportional skalieren und beschneiden. */
  .ki-agent__deko {
    background-size: cover;
  }
  .ki-agent__inner {
    grid-template-columns: minmax(0, 680px);
    row-gap: 56px;
    justify-content: center;
    padding-bottom: 96px;
  }

  .ki-agent__console {
    margin-top: 0;
  }

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

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

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

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

  .ki-agent__facts {
    margin-top: 40px;
  }

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

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

  .ki-agent__console-title {
    font-size: 18px;
  }

  /* Statuspille unter den Text, sonst wird die Zeile auf schmalen Geräten
     unlesbar gequetscht. */
  .ki-agent__task {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .ki-agent__task-lines {
    flex-basis: calc(100% - 32px);
  }

  .ki-agent__status {
    margin-left: 32px;
  }
}

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

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

  .ki-agent__fact-text {
    font-size: 16px;
  }

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