/* ==========================================================================
   KOBIL — Solution OneID4All — Sektion: Hero (Figma 16566:19148)
   Blauer Verlaufs-Hero (1360x1110) mit Titel, Kerben-CTA, Karten-Cluster
   (Chat / ID-Karte / Signatur / Schild) und zweispaltigem Abschlusstext.
   ========================================================================== */

.sec-oneid4all-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-sm);
  padding: 120px 0 100px;
}

/* ---- Hintergrund: gebackener Verlauf (Figma-Blur > 200 → als WebP) + Welle ---- */

.o4a-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.o4a-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o4a-hero__wave {
  position: absolute;
  top: -252px;
  left: -286px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2089.7px;
  height: 1292.3px;
}

.o4a-hero__wave img {
  flex: none;
  width: 2019.1px;
  height: 1165px;
  max-width: none;
  transform: rotate(176.32deg);
}

/* ---- Intro: Kicker + H1 + Kerben-CTA, zentriert ---- */

.o4a-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 813px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.o4a-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  color: var(--white);
}

.o4a-hero__kicker {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.o4a-hero__title {
  font-family: var(--font-sans);
  font-size: 50px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: 0;
}

/* CTA: weisser Button mit diagonaler Kerbe unten rechts (Figma-Shapes als Maske) */

.o4a-hero__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px 20px 4px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--navy);
  white-space: nowrap;
}

.o4a-hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  -webkit-mask-image: url("../../../assets/solutions/oneid4all/hero/btn-body.svg"),
    url("../../../assets/solutions/oneid4all/hero/btn-end.svg");
  -webkit-mask-position: left center, right center;
  -webkit-mask-size: calc(100% - 40px) 100%, 67px 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image: url("../../../assets/solutions/oneid4all/hero/btn-body.svg"),
    url("../../../assets/solutions/oneid4all/hero/btn-end.svg");
  mask-position: left center, right center;
  mask-size: calc(100% - 40px) 100%, 67px 100%;
  mask-repeat: no-repeat, no-repeat;
  transition: background-color var(--dur) var(--ease);
}

.o4a-hero__cta:hover::before {
  background: var(--navy-30);
}

.o4a-hero__cta:active {
  transform: translateY(1px);
}

.o4a-hero__cta-icon {
  transition: transform var(--dur) var(--ease);
}

.o4a-hero__cta:hover .o4a-hero__cta-icon {
  transform: translateX(3px);
}

/* ---- Karten-Cluster: fixe Design-Buehne 635x304, skaliert auf Mobile ---- */

.o4a-hero__stage {
  position: relative;
  height: 304px;
  margin-top: 54px;
}

.o4a-hero__cards {
  position: absolute;
  top: 0;
  left: 50%;
  width: 635px;
  height: 304px;
  margin-left: -317.5px;
  transform-origin: top center;
  font-family: var(--font-sans);
}

/* Figma trimmt diese Mini-UI-Texte auf Cap-Hoehe (text-box-trim) */
.o4a-hero__sig-title,
.o4a-hero__chat-name,
.o4a-hero__chat-sub,
.o4a-hero__msg-author,
.o4a-hero__bubble-text,
.o4a-hero__file-name,
.o4a-hero__file-size {
  text-box: trim-both cap alphabetic;
}

/* -- ID-Karte (John Dorethy) -- */

.o4a-hero__id {
  position: absolute;
  top: 44px;
  left: 260px;
  width: 374.8px;
  height: 228.5px;
}

.o4a-hero__id-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.o4a-hero__id-person {
  position: absolute;
  top: 25.7px;
  left: 25.8px;
  display: flex;
  align-items: center;
  gap: 10.4px;
}

.o4a-hero__id-avatar {
  width: 64.9px;
  height: 64.9px;
  border-radius: 50%;
}

.o4a-hero__id-meta {
  display: flex;
  flex-direction: column;
  gap: 5.2px;
  width: 168.2px;
}

.o4a-hero__id-name {
  font-family: var(--font-ui);
  font-size: 19.4px;
  font-weight: 500;
  line-height: normal;
  color: var(--navy);
}

.o4a-hero__id-code {
  font-family: var(--font-ui);
  font-size: 15.1px;
  font-weight: 400;
  line-height: normal;
  color: var(--navy-70);
}

.o4a-hero__id-lines {
  position: absolute;
  top: 106.2px;
  left: 26.2px;
  width: 269.5px;
  height: 87px;
}

.o4a-hero__id-print {
  position: absolute;
  top: 29.2px;
  left: 241.2px;
  width: 94.8px;
  height: 93.5px;
}

/* -- Signatur-Karte -- */

.o4a-hero__sig {
  position: absolute;
  top: 185px;
  left: 475px;
  width: 200px;
  height: 113.2px;
  overflow: hidden;
  background: var(--white);
  border: 0.94px solid #caeeff;
  border-radius: 11.7px;
  box-shadow: 15.09px 7.55px 24.53px 0 rgba(1, 42, 112, 0.1);
}

.o4a-hero__sig-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31.9px;
  background: #f2f4f9;
  font-family: var(--font-ui);
  font-size: 11.75px;
  font-weight: 500;
  line-height: 12.8px;
  color: #232935;
}

.o4a-hero__sig-strokes {
  position: absolute;
  top: 39.4px;
  left: calc(50% + 2.63px);
  width: 160.5px;
  height: 67.1px;
  overflow: hidden;
  transform: translateX(-50%);
}

.o4a-hero__sig-strokes img {
  width: 102.8%;
  height: 100%;
  max-width: none;
}

/* -- Chat-Karte (Sales Team) -- */

.o4a-hero__chat {
  position: absolute;
  top: 19px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 12.1px;
  width: 286.9px;
  padding-bottom: 12.1px;
  overflow: hidden;
  background: var(--white);
  border: 0.76px solid #caeeff;
  border-radius: 12.9px;
  box-shadow: 11.87px 5.4px 18.88px 0 rgba(1, 42, 112, 0.1);
}

.o4a-hero__chat-head {
  display: flex;
  align-items: center;
  gap: 6.5px;
  height: 47.5px;
  padding: 7.6px 9.1px 7.6px 6px;
  background: var(--navy-30);
}

.o4a-hero__chat-back,
.o4a-hero__chat-more {
  flex: none;
  width: 17.8px;
  height: 18.6px;
}

.o4a-hero__chat-more {
  margin-left: 9.3px;
}

.o4a-hero__chat-avatar {
  flex: none;
  width: 25.2px;
  height: 26.4px;
}

.o4a-hero__chat-headmeta {
  display: flex;
  flex-direction: column;
  gap: 4.7px;
  flex: 1 0 0;
  min-width: 1px;
  margin-left: 1.3px;
}

.o4a-hero__chat-name {
  font-size: 12.4px;
  font-weight: 500;
  line-height: 18.2px;
  color: #232935;
}

.o4a-hero__chat-sub {
  font-size: 9.3px;
  font-weight: 400;
  line-height: 15.2px;
  color: #747b86;
}

.o4a-hero__chat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9.1px;
  padding: 0 12.9px;
}

.o4a-hero__msg {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
}

.o4a-hero__msg-pic {
  position: relative;
  flex: none;
  width: 34.2px;
  height: 34.2px;
}

.o4a-hero__msg-pic-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}

.o4a-hero__msg-pic-mask img {
  position: absolute;
  top: -29.92%;
  left: -37.68%;
  width: 158.44%;
  height: 237.17%;
  max-width: none;
}

.o4a-hero__msg-dot {
  position: absolute;
  right: 3.1px;
  bottom: 2.1px;
  width: 5.7px;
  height: 5.7px;
}

.o4a-hero__msg-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 224.4px;
}

.o4a-hero__msg-author {
  font-size: 12.15px;
  font-weight: 600;
  line-height: 21.6px;
  color: var(--navy);
}

.o4a-hero__bubble {
  display: flex;
  width: 100%;
  padding: 8.6px 6.5px;
}

.o4a-hero__bubble--in {
  flex-direction: column;
  align-items: flex-end;
  gap: 2.2px;
  background: var(--navy-20);
  border-radius: 0 12.15px 12.15px 12.15px;
}

.o4a-hero__bubble--out {
  align-items: center;
  gap: 9.1px;
  background: var(--navy-40);
  border-radius: 8px 0 8px 8px;
}

.o4a-hero__bubble-text {
  width: 100%;
  font-size: 9.7px;
  font-weight: 400;
  line-height: 12.9px;
  color: var(--navy);
}

.o4a-hero__bubble-text--out {
  flex: 1 0 0;
  width: auto;
  min-width: 1px;
  line-height: 18.2px;
}

.o4a-hero__stamp {
  display: flex;
  align-items: center;
  gap: 2.2px;
}

.o4a-hero__time {
  font-family: "Barlow", var(--font-ui), sans-serif;
  font-size: 10.6px;
  font-weight: 400;
  line-height: normal;
  color: var(--navy-70);
  opacity: 0.8;
}

.o4a-hero__checks {
  width: 12px;
  height: 5.5px;
}

/* NDA-Datei-Karte im Chat */

.o4a-hero__file {
  display: flex;
  flex-direction: column;
  gap: 8.6px;
  width: 100%;
  padding: 12.9px 8.6px;
  background:
    linear-gradient(
      130.88deg,
      rgba(97, 173, 248, 0.6) -8%,
      rgba(224, 234, 255, 0.6) -2%,
      rgba(225, 238, 255, 0.6) 25%,
      rgba(169, 212, 255, 0.6) 67%,
      rgba(97, 173, 248, 0.6) 118%
    ),
    var(--white);
  border: 0.38px solid #b3c8ff;
  border-radius: 7.6px;
}

.o4a-hero__file-row {
  display: flex;
  align-items: center;
  gap: 6.5px;
}

.o4a-hero__file-icon {
  flex: none;
  width: 23.5px;
  height: 23.5px;
}

.o4a-hero__file-meta {
  display: flex;
  flex-direction: column;
  gap: 6.5px;
  width: 149.5px;
}

.o4a-hero__file-name,
.o4a-hero__file-signer {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 15px;
  color: var(--navy);
}

.o4a-hero__file-size {
  font-family: var(--font-ui);
  font-size: 8.7px;
  font-weight: 400;
  line-height: 13.1px;
  color: var(--navy-80);
}

.o4a-hero__file-divider {
  width: 100%;
  height: 0.4px;
  background: var(--white);
}

.o4a-hero__file-sign {
  display: flex;
  align-items: center;
  gap: 1.1px;
  width: 100%;
}

.o4a-hero__file-signer {
  flex: 1 0 0;
  min-width: 1px;
}

.o4a-hero__file-edit {
  flex: none;
  width: 11.7px;
  height: 10.2px;
  margin: 1.9px 1.2px;
}

.o4a-hero__you {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9.1px;
  width: 235.5px;
}

/* -- Schild mit Haken -- */

.o4a-hero__shield {
  position: absolute;
  top: 124.9px;
  left: 590.9px;
  width: 104.2px;
  height: 106.7px;
}

/* ---- Abschlusstext: H2 links, Copy rechts, unten buendig ---- */

.o4a-hero__foot {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  margin: 134px 80px 0;
}

.o4a-hero__headline {
  flex: none;
  width: 572px;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
}

.o4a-hero__headline-accent {
  display: block;
  color: var(--blue);
}

.o4a-hero__copy {
  flex: none;
  width: 568px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-80);
}

.o4a-hero__copy p + p {
  margin-top: 23px;
}

.o4a-hero__copy strong {
  font-weight: 600;
  color: var(--navy);
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .sec-oneid4all-hero {
    padding: 96px 0 80px;
  }

  .o4a-hero__title {
    font-size: 44px;
    line-height: 54px;
  }

  .o4a-hero__stage {
    margin-top: 48px;
  }

  .o4a-hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 96px 40px 0;
  }

  .o4a-hero__headline,
  .o4a-hero__copy {
    width: auto;
    max-width: 640px;
  }
}

@media (max-width: 768px) {
  .sec-oneid4all-hero {
    padding: 80px 0 64px;
  }

  .o4a-hero__intro {
    gap: 36px;
  }

  .o4a-hero__heading {
    gap: 16px;
  }

  .o4a-hero__kicker {
    font-size: 16px;
    line-height: 22px;
  }

  .o4a-hero__title {
    font-size: 36px;
    line-height: 46px;
  }

  .o4a-hero__stage {
    height: 214px;
    margin-top: 40px;
  }

  .o4a-hero__cards {
    transform: scale(0.7);
  }

  .o4a-hero__foot {
    gap: 20px;
    margin: 72px 24px 0;
  }

  .o4a-hero__headline {
    font-size: 32px;
    line-height: 42px;
  }
}

@media (max-width: 480px) {
  .sec-oneid4all-hero {
    padding: 64px 0 56px;
  }

  .o4a-hero__title {
    font-size: 32px;
    line-height: 40px;
  }

  .o4a-hero__title br {
    display: none;
  }

  .o4a-hero__stage {
    height: 152px;
    margin-top: 32px;
  }

  .o4a-hero__cards {
    transform: scale(0.5);
  }

  .o4a-hero__foot {
    margin: 56px 20px 0;
  }

  .o4a-hero__headline {
    font-size: 28px;
    line-height: 36px;
  }
}

/* Karten-Cluster ragt rechts 60px ueber die 635px-Buehne (Schild) —
   auf schmalen Viewports Skalierung fluid an die Breite klemmen.
   tan(atan2(x, y)) = x / y (Laengen-Division als Zahl). */
@supports (transform: scale(tan(atan2(1px, 1px)))) {
  @media (max-width: 768px) {
    .sec-oneid4all-hero {
      --o4a-cards-scale: min(0.72, tan(atan2(100vw - 32px, 770px)));
    }

    .o4a-hero__stage {
      height: calc(304px * var(--o4a-cards-scale));
    }

    .o4a-hero__cards {
      transform: scale(var(--o4a-cards-scale));
    }
  }
}