/* ============================================================
   v193 · Detailseiten-Hero: Emblem, Codefluss und Factory vergrößert
   - Desktop: ca. 30 % mehr Präsenz
   - Mobile: ca. 50 % mehr Präsenz
   - Code bleibt innerhalb der Factory und verlässt sie nicht
   - Startseiten-Hero bleibt unverändert
   ============================================================ */

/* Desktop: Der Verbund wächst kontrolliert, ohne die Headline-Ebene zu
   überlagern. Die Hero-Bühne erhält den nötigen zusätzlichen Raum. */
@media (min-width: 861px) {
  .i5-doc .subpage-keyvisual > .module-hero.detail-home-hero,
  .process-mining-doc .subpage-keyvisual > .module-hero.process-mining-hero,
  .process-intelligence-doc .subpage-keyvisual > .module-hero.process-intelligence-hero {
    min-height: 710px !important;
  }

  .i5-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .process-mining-hero-stack {
    top: 306px !important;
  }

  .process-intelligence-doc .subpage-keyvisual .module-hero.process-intelligence-hero .hero-emblem-stack,
  .process-intelligence-doc .subpage-keyvisual .module-hero.process-intelligence-hero .pi-hero-stack {
    top: 271px !important;
  }

  .subpage-keyvisual .detail-system-emblem:not(.detail-system-emblem--intelligence) {
    --factory-w: 338px !important;
    --factory-h: 216px !important;
    width: 364px !important;
    height: 345px !important;
  }

  .subpage-keyvisual .detail-system-emblem--intelligence {
    --factory-w: 338px !important;
    --factory-h: 216px !important;
    width: 390px !important;
    height: 380px !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry .detail-system-topic--industry {
    top: 0 !important;
    width: 239px !important;
    height: auto !important;
  }

  .subpage-keyvisual .detail-system-emblem--ledger .detail-system-topic--ledger {
    top: -5px !important;
    width: 195px !important;
    height: 169px !important;
  }

  .subpage-keyvisual .detail-system-emblem--process .detail-system-topic--process {
    top: 29px !important;
    width: 164px !important;
    height: 117px !important;
  }

  .subpage-keyvisual .detail-system-emblem--intelligence .detail-system-topic--intelligence {
    top: 18px !important;
    width: 164px !important;
    height: 164px !important;
  }

  .subpage-keyvisual .detail-code-fragment {
    font-size: 6.35px !important;
    letter-spacing: .022em !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry {
    --detail-flow-top: 94px !important;
    --detail-flow-width: 192px !important;
    --detail-flow-height: 151px !important;
  }
  .subpage-keyvisual .detail-system-emblem--ledger {
    --detail-flow-top: 91px !important;
    --detail-flow-width: 200px !important;
    --detail-flow-height: 153px !important;
  }
  .subpage-keyvisual .detail-system-emblem--process {
    --detail-flow-top: 86px !important;
    --detail-flow-width: 190px !important;
    --detail-flow-height: 156px !important;
  }
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --detail-flow-top: 107px !important;
    --detail-flow-width: 198px !important;
    --detail-flow-height: 156px !important;
  }

  /* Fragmentverteilung proportional zur größeren Fläche. */
  .subpage-keyvisual .detail-code-fragment--01 { top: 0 !important; left: 0 !important; }
  .subpage-keyvisual .detail-code-fragment--02 { top: 3px !important; right: 0 !important; }
  .subpage-keyvisual .detail-code-fragment--03 { top: 21px !important; left: 17px !important; }
  .subpage-keyvisual .detail-code-fragment--04 { top: 23px !important; right: 20px !important; }
  .subpage-keyvisual .detail-code-fragment--05 { top: 44px !important; left: 33px !important; }
  .subpage-keyvisual .detail-code-fragment--06 { top: 46px !important; right: 35px !important; }
  .subpage-keyvisual .detail-code-fragment--07 { top: 68px !important; left: 46px !important; }
  .subpage-keyvisual .detail-code-fragment--08 { top: 69px !important; right: 49px !important; }
  .subpage-keyvisual .detail-code-fragment--09 { top: 88px !important; left: 53px !important; }
  .subpage-keyvisual .detail-code-fragment--10 { top: 103px !important; right: 53px !important; }
  .subpage-keyvisual .detail-code-fragment--11 { top: 117px !important; left: 64px !important; }
  .subpage-keyvisual .detail-code-fragment--12 { top: 131px !important; right: 64px !important; }
}

/* Tablet und Mobile: Der Verbund wird ungefähr um 50 % vergrößert.
   Der Factory-Anfang bleibt nahezu auf dem bisherigen Niveau; die größere
   Komposition wächst vor allem nach oben und innerhalb der Hero-Bühne. */
@media (max-width: 860px) {
  .i5-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .process-mining-hero-stack,
  .process-intelligence-doc .subpage-keyvisual .module-hero.process-intelligence-hero .pi-hero-stack {
    top: 408px !important;
  }

  .subpage-keyvisual .detail-system-emblem {
    --factory-w: 276px !important;
    --factory-h: 177px !important;
    width: 315px !important;
    height: 318px !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry .detail-system-topic--industry {
    top: 3px !important;
    width: 210px !important;
    height: auto !important;
  }

  .subpage-keyvisual .detail-system-emblem--ledger .detail-system-topic--ledger {
    top: 5px !important;
    width: 159px !important;
    height: 138px !important;
  }

  .subpage-keyvisual .detail-system-emblem--process .detail-system-topic--process {
    top: 33px !important;
    width: 135px !important;
    height: 96px !important;
  }

  .subpage-keyvisual .detail-system-emblem--intelligence .detail-system-topic--intelligence {
    top: 15px !important;
    width: 129px !important;
    height: 129px !important;
  }

  .subpage-keyvisual .detail-code-fragment {
    font-size: 5.8px !important;
    letter-spacing: .016em !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry {
    --detail-flow-top: 84px !important;
    --detail-flow-width: 198px !important;
    --detail-flow-height: 153px !important;
  }
  .subpage-keyvisual .detail-system-emblem--ledger {
    --detail-flow-top: 83px !important;
    --detail-flow-width: 198px !important;
    --detail-flow-height: 155px !important;
  }
  .subpage-keyvisual .detail-system-emblem--process {
    --detail-flow-top: 75px !important;
    --detail-flow-width: 198px !important;
    --detail-flow-height: 162px !important;
  }
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --detail-flow-top: 89px !important;
    --detail-flow-width: 198px !important;
    --detail-flow-height: 149px !important;
  }

  .subpage-keyvisual .detail-code-flow {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 7%,
      #000 70%,
      rgba(0,0,0,.68) 82%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 7%,
      #000 70%,
      rgba(0,0,0,.68) 82%,
      transparent 100%
    ) !important;
  }

  .subpage-keyvisual .detail-code-fragment--01 { top: 0 !important; left: 2px !important; }
  .subpage-keyvisual .detail-code-fragment--02 { top: 4px !important; right: 0 !important; }
  .subpage-keyvisual .detail-code-fragment--03 { top: 23px !important; left: 14px !important; }
  .subpage-keyvisual .detail-code-fragment--04 { top: 26px !important; right: 14px !important; }
  .subpage-keyvisual .detail-code-fragment--05 { top: 49px !important; left: 27px !important; }
  .subpage-keyvisual .detail-code-fragment--06 { top: 53px !important; right: 27px !important; }
  .subpage-keyvisual .detail-code-fragment--07 { top: 76px !important; left: 42px !important; }
  .subpage-keyvisual .detail-code-fragment--08 { top: 79px !important; right: 42px !important; }
  .subpage-keyvisual .detail-code-fragment--09 { top: 98px !important; left: 51px !important; }
  .subpage-keyvisual .detail-code-fragment--10 { top: 113px !important; right: 51px !important; }
  .subpage-keyvisual .detail-code-fragment--11 { top: 130px !important; left: 60px !important; }
  .subpage-keyvisual .detail-code-fragment--12 { top: 145px !important; right: 60px !important; }
}

@media (max-width: 480px) {
  .i5-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .process-mining-hero-stack,
  .process-intelligence-doc .subpage-keyvisual .module-hero.process-intelligence-hero .pi-hero-stack {
    top: 410px !important;
  }

  .subpage-keyvisual .detail-system-emblem {
    --factory-w: 267px !important;
    --factory-h: 171px !important;
    width: 303px !important;
    height: 306px !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry .detail-system-topic--industry {
    top: 3px !important;
    width: 198px !important;
  }
  .subpage-keyvisual .detail-system-emblem--ledger .detail-system-topic--ledger {
    top: 8px !important;
    width: 150px !important;
    height: 129px !important;
  }
  .subpage-keyvisual .detail-system-emblem--process .detail-system-topic--process {
    top: 35px !important;
    width: 126px !important;
    height: 90px !important;
  }
  .subpage-keyvisual .detail-system-emblem--intelligence .detail-system-topic--intelligence {
    top: 15px !important;
    width: 117px !important;
    height: 117px !important;
  }

  .subpage-keyvisual .detail-code-fragment {
    font-size: 5.7px !important;
  }

  .subpage-keyvisual .detail-system-emblem--industry {
    --detail-flow-top: 78px !important;
    --detail-flow-width: 189px !important;
    --detail-flow-height: 147px !important;
  }
  .subpage-keyvisual .detail-system-emblem--ledger {
    --detail-flow-top: 77px !important;
    --detail-flow-width: 189px !important;
    --detail-flow-height: 149px !important;
  }
  .subpage-keyvisual .detail-system-emblem--process {
    --detail-flow-top: 71px !important;
    --detail-flow-width: 189px !important;
    --detail-flow-height: 155px !important;
  }
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --detail-flow-top: 81px !important;
    --detail-flow-width: 189px !important;
    --detail-flow-height: 144px !important;
  }

  /* Das letzte Fragment bleibt auf sehr schmalen Viewports ausgeblendet;
     alle sichtbaren Fragmente enden sicher innerhalb der Factory. */
  .subpage-keyvisual .detail-code-fragment--12 {
    display: none !important;
  }
}