/* ============================================================
   v251 · Gemeinsames Header- und Hero-System
   Startseite ist der verbindliche Maßstab für alle Detailseiten.
   ============================================================ */

:root{
  --v251-hero-bg:#0e0e10;
  --v251-hero-gradient:radial-gradient(118% 118% at 82% -12%,#1d252f 0%,#12171c 34%,#0d1014 58%,#0e0e10 88%);
  --v251-gold:rgba(203,183,127,.94);
}

/* Identischer statischer Header-Hintergrund auf Start- und Detailseiten. */
.site-header,
.site-header.is-compact{
  background:#090c0f!important;
  border-bottom-color:rgba(203,183,127,.20)!important;
}
.site-header::after,
.site-header.is-compact::after{
  content:""!important;
  display:block!important;
  left:-6%!important;
  right:-6%!important;
  top:36px!important;
  bottom:0!important;
  opacity:.73!important;
  transform:scale(1.09)!important;
  background-image:
    linear-gradient(90deg,rgba(8,10,13,.54) 0%,rgba(9,12,16,.27) 30%,rgba(9,11,14,.30) 66%,rgba(8,9,11,.70) 100%),
    linear-gradient(180deg,rgba(10,12,15,.20) 0%,rgba(8,9,11,.45) 100%),
    url("assets/header-data-tunnel-desktop.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  filter:saturate(.68) contrast(.92)!important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.88) 0%,#000 15%,#000 82%,rgba(0,0,0,.62) 100%)!important;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.88) 0%,#000 15%,#000 82%,rgba(0,0,0,.62) 100%)!important;
}

/* Exakt dieselbe Hero-Grundfläche, derselbe Verlauf und dasselbe Grid. */
.hero-field.hero-centered,
.subpage-keyvisual{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--v251-hero-bg)!important;
}
.hero-field.hero-centered::after,
.subpage-keyvisual::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:var(--brand-header-canvas-height);
  z-index:0;
  pointer-events:none;
  background:var(--v251-hero-gradient)!important;
}
.hero-field.hero-centered::before,
.subpage-keyvisual::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:var(--brand-header-canvas-height);
  z-index:1;
  pointer-events:none;
  background-image:url("assets/mf-hero-v.svg")!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:auto 100%!important;
  opacity:.8!important;
}
.hero-field.hero-centered .hero-grid-lines,
.subpage-keyvisual .hero-grid-lines{
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  -webkit-mask-image:radial-gradient(78% 78% at 72% 18%,#000 28%,transparent 76%)!important;
  mask-image:radial-gradient(78% 78% at 72% 18%,#000 28%,transparent 76%)!important;
}

/* Detail-Heroes übernehmen Typografie und Rhythmus der Startseite. */
.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{
  padding:76px 0 88px!important;
}
.i5-doc .subpage-keyvisual .detail-hero-content{
  width:min(var(--max),calc(100% - 40px))!important;
  max-width:var(--max)!important;
  margin:0 auto!important;
  text-align:center!important;
}

/* Oberste Zeile: golden, ohne dekorativen Strich, überall identisch. */
.i5-doc .subpage-keyvisual .module-hero .module-eyebrow{
  display:block!important;
  width:max-content!important;
  max-width:calc(100% - 32px)!important;
  margin:0 auto 20px!important;
  color:var(--v251-gold)!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  text-align:center!important;
}
.i5-doc .subpage-keyvisual .module-hero .module-eyebrow::before,
.i5-doc .subpage-keyvisual .module-hero .module-eyebrow::after{
  content:none!important;
  display:none!important;
}

/* H1 und Lead entsprechen der Startseitenwirkung. */
.i5-doc .subpage-keyvisual .module-hero .module-title{
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto 24px!important;
  color:#f6f7f4!important;
  font-size:clamp(2.2rem,3.45vw,3.45rem)!important;
  font-weight:700!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  text-align:center!important;
  text-wrap:balance!important;
}
.i5-doc .subpage-keyvisual .module-hero .module-lead{
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto 34px!important;
  color:rgba(244,247,243,.88)!important;
  font-size:clamp(1.08rem,1.9vw,1.35rem)!important;
  line-height:1.58!important;
  text-align:center!important;
  text-wrap:balance!important;
}

/* Kurze Claims liegen auf einer gemeinsamen Achse. */
.hero.hero-dark>.hero-gold-claim{
  top:372px!important;
  max-width:min(760px,calc(100% - 48px))!important;
  color:var(--v251-gold)!important;
  font-size:.72rem!important;
  font-weight:690!important;
  line-height:1.4!important;
  letter-spacing:.028em!important;
}

@media (max-width:860px){
  .site-header::after,
  .site-header.is-compact::after{
    top:34px!important;
    left:-9%!important;
    right:-9%!important;
    opacity:.68!important;
    transform:scale(1.08)!important;
    background-image:
      linear-gradient(90deg,rgba(8,10,13,.56) 0%,rgba(8,10,13,.28) 48%,rgba(8,9,11,.64) 100%),
      linear-gradient(180deg,rgba(8,10,13,.16) 0%,rgba(8,9,11,.50) 100%),
      url("assets/header-data-tunnel-mobile.webp")!important;
    background-position:58% center!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .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{
    padding:58px 0 62px!important;
  }
  .i5-doc .subpage-keyvisual .detail-hero-content{
    width:min(100% - 28px,var(--max))!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-eyebrow{
    margin-bottom:17px!important;
    font-size:.72rem!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-title{
    margin-bottom:22px!important;
    font-size:clamp(2rem,9vw,3.15rem)!important;
    line-height:1.08!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-lead{
    margin-bottom:30px!important;
    font-size:clamp(1rem,4.4vw,1.16rem)!important;
    line-height:1.58!important;
  }
  .subpage-keyvisual>.module-hero.hero.hero-dark>.hero-gold-claim,
  .hero-field.hero-centered>.hero.hero-dark>.hero-gold-claim{
    top:390px!important;
  }
}

@media (max-width:480px){
  .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{
    padding:48px 0 54px!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-eyebrow{
    max-width:calc(100% - 20px)!important;
    font-size:.68rem!important;
    letter-spacing:.13em!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-title{
    font-size:clamp(1.9rem,9.5vw,2.65rem)!important;
  }
  .i5-doc .subpage-keyvisual .module-hero .module-lead{
    font-size:1rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header::after,
  .site-header.is-compact::after{
    transform:scale(1.08)!important;
  }
}

/* Letzte Neutralisierung seitenbezogener Grundfarben. Der sichtbare Hero-Canvas
   ist damit auch rechnerisch identisch mit der Startseite. */
body .i5-doc .subpage-keyvisual{
  background-color:var(--v251-hero-bg)!important;
  background-image:none!important;
}

@media (max-width:480px){
  .i5-doc .subpage-keyvisual .module-hero .module-eyebrow{
    font-size:.70rem!important;
  }
}