/* ==========================================================================
   Geteilte Grundlage für alle drei KI-Sektionen
   Design-Tokens aus dem Figma-Frame (Datei 3qugv1k0IWPM3iHUSGZ468).
   Die Datei muss VOR den Sektions-Stylesheets eingebunden werden.
   ========================================================================== */

:root {
  /* --- Farben: Grün-Familie ------------------------------------------- */
  --lx-green: #0e9e58;            /* Primärgrün, CTA & Akzent auf Hell     */
  --lx-green-bright: #01be56;     /* Signalgrün, Akzent auf Dunkel         */
  --lx-green-dark: #032e1a;       /* Headlines auf Hell                    */
  --lx-green-deepest: #06231a;    /* Sektionshintergrund Dunkel            */
  --lx-green-console: #0a3526;    /* Kartenhintergrund Dunkel              */
  --lx-green-chip-text: #0b6e42;  /* Text in Beispiel-/Vorschlags-Chips    */

  /* --- Farben: Text ---------------------------------------------------- */
  --lx-text-body: #3d5c4b;        /* Fließtext auf Hell                    */
  --lx-text-muted: #5b8a72;       /* Kleingedrucktes auf Hell              */
  --lx-text-body-dark: #b9dcc8;   /* Fließtext auf Dunkel                  */
  --lx-text-muted-dark: #7fae93;  /* Kleingedrucktes auf Dunkel            */
  --lx-text-ai: #233f31;          /* Text in der AI-Bubble                 */

  /* --- Farben: Flächen & Linien ---------------------------------------- */
  --lx-white: #ffffff;
  --lx-bg-mint: #f5faf7;          /* Sektion A, Dashboard-Karte Sektion C  */
  --lx-bg-bubble: #f2f8f4;        /* AI-Bubble Sektion A                   */
  --lx-border-mint: #bfe3d0;      /* Chip-Rahmen                           */

  /* --- Farben: Status --------------------------------------------------- */
  --lx-yellow: #ffef80;           /* NEU-Badge, Hinweis-Alert              */
  --lx-amber: #ffce00;            /* Status „läuft"                        */
  --lx-orange: #f07d00;           /* Status „deine Freigabe"               */
  --lx-red: #e8404f;              /* Engpass-Warnung                       */

  /* --- Typografie ------------------------------------------------------- */
  --lx-font-display: "Urbanist", system-ui, -apple-system, sans-serif;
  --lx-font-text: "Inter", system-ui, -apple-system, sans-serif;

  --lx-size-eyebrow: 15px;
  --lx-size-headline: 64px;
  --lx-size-lead: 20px;
  --lx-size-cta: 24px;
  --lx-size-note: 14px;

  --lx-tracking-eyebrow: 1.2px;
  --lx-leading-headline: 1.1;
  --lx-leading-lead: 1.58;

  /* --- Radien ------------------------------------------------------------ */
  --lx-radius-badge: 4px;
  --lx-radius-cta: 6px;
  --lx-radius-task: 10px;
  --lx-radius-status: 12px;
  --lx-radius-bubble: 14px;
  --lx-radius-card: 18px;
  --lx-radius-pill: 22px;

  /* --- Schatten ---------------------------------------------------------- */
  --lx-shadow-cta: 0 10px 24px rgba(14, 158, 88, 0.35);
  --lx-shadow-cta-glow: 0 0 28px rgba(1, 190, 86, 0.5);
  --lx-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.12);
  --lx-shadow-console: 0 0 44px rgba(1, 190, 86, 0.25);
  --lx-shadow-dashboard: 0 14px 36px rgba(0, 0, 0, 0.1);
  --lx-shadow-alert: 0 6px 14px rgba(0, 0, 0, 0.18);

  /* --- Layout ------------------------------------------------------------ */
  /* Breite des Figma-Frames. Der Außenabstand steckt im padding der
     Inner-Container, nicht hier — bei box-sizing: border-box würde er sonst
     doppelt abgezogen und der Inhalt liefe rechts aus dem Container heraus. */
  --lx-content-max: 1920px;
  --lx-gutter: 160px;             /* 1920 − 2 × 160 = 1600 nutzbare Breite  */
}

/* --------------------------------------------------------------------------
   CTA-Grundform. Die farbliche Ausprägung setzt jede Sektion selbst,
   weil sie sich zwischen hellem und dunklem Hintergrund unterscheidet.
   -------------------------------------------------------------------------- */

.lx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 44px;
  border: 0;
  border-radius: var(--lx-radius-cta);
  font-family: var(--lx-font-display);
  font-weight: 500;
  font-size: var(--lx-size-cta);
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lx-cta:hover {
  transform: translateY(-2px);
}

.lx-cta:active {
  transform: translateY(0);
}

/* Sichtbarer Fokus für alle interaktiven Elemente der Sektionen. */
.lx-section :focus-visible {
  outline: 3px solid var(--lx-green-bright);
  outline-offset: 3px;
}

.lx-section {
  box-sizing: border-box;
}

.lx-section *,
.lx-section *::before,
.lx-section *::after {
  box-sizing: inherit;
}

/* Nur für Screenreader sichtbar. */
.lx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bewegung reduzieren: greift auf die CTA-Anhebung. Sektionseigene
   Animationen schalten sich in ihrem eigenen Stylesheet ab. */
@media (prefers-reduced-motion: reduce) {
  .lx-cta,
  .lx-cta:hover,
  .lx-cta:active {
    transform: none;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
}