/* ==========================================================================
   KOBIL — Produktseite mPower — Sektion: Overview (Figma 16652:22274)
   ========================================================================== */

.sec-mpower-overview {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: 700px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f4f9fc;
}

/* ---- Hintergrund (gebackene Verlaufs-Layer) + Rahmen ---- */

.sec-mpower-overview__bg,
.sec-mpower-overview__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- Text-Spalte ---- */

.sec-mpower-overview__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 1 565px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
  margin-left: 40px;
}

.sec-mpower-overview__eyebrow {
  gap: 10px;
  letter-spacing: 0.48px;
  color: var(--navy-70);
}

.sec-mpower-overview__eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-mpower-overview__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

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

.sec-mpower-overview__title-accent {
  color: var(--blue);
}

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

/* ---- Visual: App-Icon-Netzwerk (Canvas 720x698, alles in %) ---- */

.sec-mpower-overview__visual {
  /* Kein z-index hier: ein eigener Stacking-Context unterbindet in Chromium das
     mix-blend-mode:multiply der Icon-Kacheln (weisse PNG-Hintergruende blieben
     als opake Quadrate sichtbar). DOM-Reihenfolge layert bg/stroke < visual < copy. */
  position: relative;
  flex: 0 0 auto;
  width: min(720px, 53%);
  aspect-ratio: 720 / 698;
  margin-left: auto;
}

.sec-mpower-overview .ov-lines {
  position: absolute;
  left: 6.182%;
  top: 6.199%;
  width: 87.778%;
  height: 87.464%;
}

.sec-mpower-overview .ov-tile {
  position: absolute;
  aspect-ratio: 1 / 1;
}

.sec-mpower-overview .ov-tile__icon {
  position: absolute;
  display: block;
  mix-blend-mode: multiply;
}

.sec-mpower-overview .ov-tile__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Einzelne Kacheln (Positionen/Groessen aus Figma, % von 720x698) */

.sec-mpower-overview .ov-tile--gitlab {
  left: 61.926%;
  top: 58.546%;
  width: 15.734%;
  border-radius: 24.336%;
  background: rgba(255, 255, 255, 0.8);
}

.sec-mpower-overview .ov-tile--gitlab .ov-tile__icon {
  inset: 20.91% 20.91% 20.91% 20.9%;
}

.sec-mpower-overview .ov-tile--lens {
  left: 12.368%;
  top: 8.36%;
  width: 9.682%;
  border-radius: 30%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--lens .ov-tile__icon {
  inset: 23.75%;
  overflow: hidden;
  border-radius: 30.952%;
}

.sec-mpower-overview .ov-tile--lens img {
  object-fit: contain;
}

.sec-mpower-overview .ov-tile--clickup {
  left: 24.35%;
  top: 19.785%;
  width: 13.918%;
  border-radius: 25.992%;
  background: rgba(255, 255, 255, 0.8);
}

.sec-mpower-overview .ov-tile--clickup .ov-tile__icon {
  inset: 20.91% 20.92% 20.91% 20.9%;
  mix-blend-mode: darken;
}

.sec-mpower-overview .ov-tile--salesforce {
  left: 65.983%;
  top: 4.864%;
  width: 6.899%;
  border-radius: 35.088%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--salesforce .ov-tile__icon {
  inset: 10%;
}

.sec-mpower-overview .ov-tile--diamond {
  left: 47.526%;
  top: 89.256%;
  width: 5.083%;
  border-radius: 28.069%;
  background: rgba(255, 255, 255, 0.6);
}

.sec-mpower-overview .ov-tile--diamond .ov-tile__icon {
  inset: 21.06% 21.06% 21.05% 21.05%;
}

.sec-mpower-overview .ov-tile--microsoft-365 {
  left: 30.401%;
  top: 69.092%;
  width: 13.918%;
  border-radius: 20.87%;
  background: rgba(255, 255, 255, 0.6);
}

.sec-mpower-overview .ov-tile--microsoft-365 .ov-tile__icon {
  inset: 18%;
}

.sec-mpower-overview .ov-tile--miro {
  left: 4.368%;
  top: 85.88%;
  width: 8.351%;
  border-radius: 28.985%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--miro .ov-tile__icon {
  inset: 15.94%;
}

.sec-mpower-overview .ov-tile--dropbox {
  left: 4.139%;
  top: 37.947%;
  width: 7.746%;
  border-radius: 31.25%;
  background: rgba(255, 255, 255, 0.6);
}

.sec-mpower-overview .ov-tile--dropbox .ov-tile__icon {
  inset: 25%;
  overflow: hidden;
  border-radius: 25%;
}

.sec-mpower-overview .ov-tile--hexagon {
  left: 70.944%;
  top: 82.016%;
  width: 9.682%;
  border-radius: 30%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--hexagon .ov-tile__icon {
  inset: 10% 9.99% 10% 10.01%;
}

.sec-mpower-overview .ov-tile--blades {
  left: 38.147%;
  top: 2.116%;
  width: 5.204%;
  border-radius: 32.559%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--blades .ov-tile__icon {
  inset: 17.37% 16.97% 17.72% 18.12%;
}

.sec-mpower-overview .ov-tile--blades img {
  object-fit: contain;
}

.sec-mpower-overview .ov-tile--trello {
  left: 9.938%;
  top: 69.341%;
  width: 5.325%;
  border-radius: 27.273%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--trello .ov-tile__icon {
  inset: 21.63% 20.59% 20.99% 19.42%;
}

.sec-mpower-overview .ov-tile--notion {
  left: 79.286%;
  top: 43.814%;
  width: 9.682%;
  border-radius: 30%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--notion .ov-tile__icon {
  inset: 27.51% 27.49% 27.49% 27.51%;
}

.sec-mpower-overview .ov-tile--slack {
  left: 17.935%;
  top: 51.804%;
  width: 10.166%;
  border-radius: 28.572%;
  background: rgba(255, 255, 255, 0.6);
}

.sec-mpower-overview .ov-tile--slack .ov-tile__icon {
  inset: 20.9% 20.91% 20.91% 20.9%;
}

.sec-mpower-overview .ov-tile--google {
  left: 51.46%;
  top: 16.223%;
  width: 9.561%;
  border-radius: 30.381%;
  background: rgba(255, 255, 255, 0.6);
}

.sec-mpower-overview .ov-tile--google .ov-tile__icon {
  inset: 20.92% 20.9% 20.9% 20.92%;
}

.sec-mpower-overview .ov-tile--teams {
  left: 70.099%;
  top: 24.215%;
  width: 13.313%;
  border-radius: 21.819%;
  background: rgba(255, 255, 255, 0.7);
}

.sec-mpower-overview .ov-tile--teams .ov-tile__icon {
  inset: 20.91%;
}

.sec-mpower-overview .ov-tile--zendesk {
  left: 87.768%;
  top: 65.162%;
  width: 5.325%;
  border-radius: 24.561%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--zendesk .ov-tile__icon {
  inset: 23.82% 23.76% 23.93% 23.98%;
}

.sec-mpower-overview .ov-tile--asana {
  left: 87.768%;
  top: 15.6%;
  width: 5.325%;
  border-radius: 24.561%;
  background: rgba(255, 255, 255, 0.4);
}

.sec-mpower-overview .ov-tile--asana .ov-tile__icon {
  inset: 17.54%;
}

.sec-mpower-overview .ov-tile--asana img {
  object-fit: contain;
}

/* Zentrale mPower-Kachel */

.sec-mpower-overview .ov-tile--mpower {
  left: 37.3%;
  top: 35.575%;
  z-index: 1;
  width: 23.721%;
  border-radius: 20.408%;
  background: linear-gradient(-33.4797deg, #78c1df 6.7401%, #1d56ee 58.652%, #00103a 93.26%);
  box-shadow: 17.428px 8.714px 20.914px rgba(46, 85, 205, 0.2);
}

.sec-mpower-overview .ov-tile--mpower .ov-tile__icon {
  inset: 21.39% 15.32%;
  mix-blend-mode: normal;
}

.sec-mpower-overview .ov-tile--mpower img {
  position: absolute;
  left: -0.42%;
  top: -0.14%;
  width: 100.83%;
  height: 115.42%;
  max-width: none;
  object-fit: fill;
}

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

@media (max-width: 1200px) {
  .sec-mpower-overview__title {
    font-size: 36px;
    line-height: 46px;
  }
}

@media (max-width: 1024px) {
  .sec-mpower-overview {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 64px 40px;
    gap: 48px;
  }

  .sec-mpower-overview__copy {
    flex: 0 0 auto;
    max-width: 640px;
    margin-left: 0;
  }

  .sec-mpower-overview__visual {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .sec-mpower-overview {
    padding: 56px 24px;
    gap: 40px;
  }

  .sec-mpower-overview__copy {
    gap: 24px;
  }

  .sec-mpower-overview__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .sec-mpower-overview {
    padding: 48px 20px;
    gap: 32px;
  }

  .sec-mpower-overview__body {
    font-size: 15px;
    line-height: 22px;
  }
}