/* ==========================================================================
   KOBIL — Products/IDentity — Sektion: Approach ("aproach", 1360x728)
   Weiße Karte (Radius 12px — im Figma-Mask-Rect gemessen) auf navy-20-Grund.
   Links Eyebrow "APPROACH", H2 "Identity That / Works at Every Layer"
   (2. Zeile blau) + Fließtext; rechts das konzentrische "Core ID"-Diagramm
   (568px, als SVG mit ausgeplotteten Texten exportiert).
   Dahinter weiche cyan Glow-Ringe als gerendertes WebP (Figma-Export 2x,
   exakt 1360x728 — Live-Blur wäre in Chromium fehleranfällig).
   ========================================================================== */

.sec-identity-approach {
  position: relative;
  isolation: isolate;
  height: 728px;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 73px 0 40px;
}

/* ---- Hintergrund-Glow (dekorativ, füllt die ganze Karte) ---------------- */

.sec-identity-approach__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ---- Textspalte links ---------------------------------------------------- */

.sec-identity-approach__text {
  flex: 0 0 auto;
  width: 403px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Eyebrow: Figma-Variante mit 12px-Punkt, 10px Gap, ls 4% (0.48px), navy-70 */
.sec-identity-approach .eyebrow {
  gap: 10px;
  letter-spacing: 0.48px;
  color: var(--navy-70);
}

.sec-identity-approach .eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-identity-approach__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.sec-identity-approach__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.sec-identity-approach__title-accent {
  color: var(--blue);
}

.sec-identity-approach__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-70);
}

/* ---- Diagramm rechts ------------------------------------------------------ */

.sec-identity-approach__figure {
  flex: 0 0 auto;
  width: 568px;
  height: 568px;
}

.sec-identity-approach__diagram {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Diagramm schrumpfen lassen, bevor es mit der Textspalte kollidiert */
@media (max-width: 1200px) {
  .sec-identity-approach {
    height: auto;
    padding: 64px 40px;
  }

  .sec-identity-approach__figure {
    width: min(46vw, 568px);
    height: auto;
  }

  .sec-identity-approach__diagram {
    height: auto;
  }
}

/* Stapeln: Text oben, Diagramm zentriert darunter */
@media (max-width: 1024px) {
  .sec-identity-approach {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .sec-identity-approach__text {
    width: 100%;
    max-width: 560px;
  }

  .sec-identity-approach__figure {
    width: min(100%, 568px);
    align-self: center;
  }

  /* Glow-Zentrum (liegt im Export rechts) über dem Diagramm halten */
  .sec-identity-approach__bg {
    object-position: 90% 50%;
  }
}

@media (max-width: 768px) {
  .sec-identity-approach {
    padding: 56px 32px;
    gap: 40px;
  }

  .sec-identity-approach__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .sec-identity-approach {
    padding: 48px 20px;
  }
}