/* ============================================================
   v226 · Gemeinsames Hero-System
   - Factory auf einer festen visuellen Grundlinie
   - Startseite und Detailseiten mit identischem Tiefenverlauf
   - klare V-/Linienlogik und ruhige Seitennavigation
   ============================================================ */

:root {
  --v226-divider: rgba(203, 183, 127, .20);
  --v226-hero-gradient: radial-gradient(118% 118% at 82% -12%, #1d252f 0%, #12171c 34%, #0d1014 58%, #0e0e10 88%);
  --v226-content-gradient:
    radial-gradient(78% 125% at 88% 20%, rgba(50, 66, 84, .22), transparent 68%),
    linear-gradient(180deg, #101114 0%, #0c0d0f 100%);
  --v226-stack-top: 320px;
  --v226-emblem-width: 390px;
  --v226-emblem-height: 364px;
  --v226-factory-width: 352px;
  --v226-factory-height: 225px;
  --v226-nav-top: 620px;
  --v226-nav-width: min(1120px, calc(100vw - 96px));
}

/* ------------------------------------------------------------
   1. Identische Hero-Tiefe auf Startseite und Detailseiten
   ------------------------------------------------------------ */
.hero-field.hero-centered::after,
.ledger-doc .subpage-keyvisual::after,
.process-mining-doc .subpage-keyvisual::after,
.process-intelligence-doc .subpage-keyvisual::after,
.i5-doc .subpage-keyvisual::after {
  background: var(--v226-hero-gradient) !important;
}

/* Der Hero bleibt eine klare, geschlossene Bühne. */
.hero-field.hero-centered > .hero.hero-dark,
.ledger-doc .subpage-keyvisual > .module-hero,
.process-mining-doc .subpage-keyvisual > .module-hero,
.process-intelligence-doc .subpage-keyvisual > .module-hero,
.i5-doc .subpage-keyvisual > .module-hero {
  border-bottom: 1px solid var(--v226-divider) !important;
  background: transparent !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Der V-Scheitel bleibt vollständig sichtbar und endet an der Abschlusslinie. */
@media (min-width: 861px) {
  .hero-field.hero-centered::before,
  .subpage-keyvisual::before {
    background-position: center top !important;
    background-size: auto 113.636% !important;
  }
}

/* ------------------------------------------------------------
   2. Factory überall auf exakt derselben Grundposition
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  .hero-field.hero-centered .hero-emblem-stack,
  .ledger-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .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,
  .i5-doc .subpage-keyvisual .module-hero .hero-emblem-stack {
    top: var(--v226-stack-top) !important;
  }

  /* Entscheidend: alle Emblem-Container haben dieselbe Höhe. Dadurch liegt
     die Factory-Unterkante unabhängig vom Seitensymbol exakt gleich. */
  .hero-field.hero-centered .detail-system-emblem--home,
  .subpage-keyvisual .detail-system-emblem,
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --factory-w: var(--v226-factory-width) !important;
    --factory-h: var(--v226-factory-height) !important;
    width: var(--v226-emblem-width) !important;
    height: var(--v226-emblem-height) !important;
  }

  /* Startseite behält die monumentale Präsenz der freigegebenen Variante. */
  .hero-field.hero-centered .detail-system-emblem--home .home-system-source {
    top: 10px !important;
    width: 320px !important;
    height: 178px !important;
    margin-left: -160px !important;
  }

  .hero-field.hero-centered .detail-system-emblem--home .home-system-code-field {
    inset: 0 0 38px !important;
  }
}

/* ------------------------------------------------------------
   3. Seitennavigation ruhiger und systemweit identisch
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  .detail-page-sequence,
  .detail-page-sequence--intelligence {
    top: var(--v226-nav-top) !important;
    width: var(--v226-nav-width) !important;
    min-height: 52px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .detail-page-nav {
    min-width: 190px !important;
    padding-block: 6px !important;
  }

  .detail-page-nav__label {
    max-width: 205px !important;
  }
}

/* ------------------------------------------------------------
   4. Übergang in den ersten Inhaltsbereich
   ------------------------------------------------------------ */
.ledger-doc .subpage-keyvisual > .ledger-event-section,
.process-mining-doc .subpage-keyvisual > .pm-intro-section,
.process-intelligence-doc .subpage-keyvisual > .pi-intro-section,
.i5-doc .subpage-keyvisual > .i50-intro-section {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: var(--v226-content-gradient) !important;
}

/* Die starke horizontale Übergangsachse bleibt sichtbar und wird nicht vom
   Farbverlauf verschluckt. */
.ledger-doc .subpage-keyvisual > .ledger-event-section::before,
.process-mining-doc .subpage-keyvisual > .pm-intro-section::before,
.process-intelligence-doc .subpage-keyvisual > .pi-intro-section::before,
.i5-doc .subpage-keyvisual > .i50-intro-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--v226-divider);
  pointer-events: none;
  z-index: 3;
}

/* Der zusätzliche Hero-Fade bleibt sehr zurückhaltend; die klare Linie führt. */
.ledger-doc .subpage-keyvisual > .module-hero::after,
.process-mining-doc .subpage-keyvisual > .module-hero::after,
.process-intelligence-doc .subpage-keyvisual > .module-hero::after,
.i5-doc .subpage-keyvisual > .module-hero::after {
  height: 96px !important;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0), rgba(11, 11, 13, .36) 72%, rgba(11, 11, 13, .72) 100%) !important;
}

/* ------------------------------------------------------------
   5. Mobile: gemeinsame Grundposition und klare Übergänge
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  /* Auf Mobilgeräten beziehen sich alle Factory-Koordinaten direkt auf die
     Hero-Bühne und nicht auf unterschiedlich hohe Textcontainer. */
  .hero-field.hero-centered .hero-stack,
  .hero-field.hero-centered .hero-content,
  .ledger-doc .subpage-keyvisual .detail-hero-content,
  .process-mining-doc .subpage-keyvisual .detail-hero-content,
  .process-intelligence-doc .subpage-keyvisual .detail-hero-content,
  .i5-doc .subpage-keyvisual .detail-hero-content {
    position: static !important;
  }

  .hero-field.hero-centered .hero-emblem-stack,
  .ledger-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .process-mining-doc .subpage-keyvisual .module-hero .hero-emblem-stack,
  .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,
  .i5-doc .subpage-keyvisual .module-hero .hero-emblem-stack {
    top: 410px !important;
  }

  .hero-field.hero-centered .detail-system-emblem--home,
  .subpage-keyvisual .detail-system-emblem,
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --factory-w: 284px !important;
    --factory-h: 182px !important;
    width: 322px !important;
    height: 324px !important;
  }

  .detail-page-sequence,
  .detail-page-sequence--intelligence {
    top: 728px !important;
    width: calc(100% - 28px) !important;
  }

  .ledger-doc .subpage-keyvisual > .ledger-event-section,
  .process-mining-doc .subpage-keyvisual > .pm-intro-section,
  .process-intelligence-doc .subpage-keyvisual > .pi-intro-section,
  .i5-doc .subpage-keyvisual > .i50-intro-section {
    background: var(--v226-content-gradient) !important;
  }
}

@media (max-width: 520px) {
  .hero-field.hero-centered .detail-system-emblem--home,
  .subpage-keyvisual .detail-system-emblem,
  .subpage-keyvisual .detail-system-emblem--intelligence {
    --factory-w: 272px !important;
    --factory-h: 174px !important;
    width: 308px !important;
    height: 310px !important;
  }
}