/* ============================================================
   v248 · Process Mining – konsolidierte deutsche Detailseite
   Bestehendes Detailseiten-Raster · eine CSS-Datei · Vanilla JS
   ============================================================ */

.pm-page{
  --pm-gold:#cbb77f;
  --pm-gold-bright:#dfce9d;
  --pm-white:#f5f3ee;
  --pm-ink:rgba(235,232,224,.78);
  --pm-muted:rgba(235,232,224,.54);
  --pm-line:rgba(203,183,127,.20);
  --pm-bg:#0b0d11;
  background:var(--pm-bg);
  color:var(--pm-ink);
}

.pm-page *{box-sizing:border-box}
.pm-page [hidden]{display:none!important}
.pm241-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Hero-Geometrie und Hero-Inhalte bleiben unverändert. */
.pm-page .subpage-keyvisual .module-hero.process-mining-hero .module-title.pm-hero-title{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  font-size:clamp(2.45rem,4.6vw,4.25rem);
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.pm-page .subpage-keyvisual .module-hero.process-mining-hero .module-lead{max-width:940px}
.pm-page .process-mining-hero .detail-page-sequence{position:absolute}
.pm-page .process-mining-hero .detail-hero-content{position:static}

/* -----------------------------------------------------------------
   Layout-Fundament: breite Seitencontainer, schmale gemeinsame Textachse
   ----------------------------------------------------------------- */
.pm-page .container.pm-wide{
  width:min(calc(100% - 48px),820px);
  max-width:820px;
  margin-inline:auto;
}

.pm-section{
  position:relative;
  padding:104px 0;
  background:#0b0d11;
}

.pm-page .pm-section-head{
  hyphens:auto;
  -webkit-hyphens:auto;
}

.pm-page .pm-section-head>.eyebrow{
  margin:0 0 22px;
  color:rgba(203,183,127,.82);
  font-size:.70rem;
  font-weight:720;
  line-height:1.35;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.pm-page .pm-section-head>.ledger-title{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:normal;
}

.pm-section-lead,
.pm-section-body{
  width:100%;
  max-width:var(--detail-body-width);
  margin-left:0;
  margin-right:0;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.pm-section-lead{
  margin-top:24px;
  color:rgba(245,243,238,.88);
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.62;
}

.pm-section-body{margin-top:34px}
.pm-section-body p{
  margin:0;
  color:var(--pm-ink);
  font-size:clamp(.98rem,1.08vw,1.08rem);
  line-height:1.74;
}
.pm-section-body p+p{margin-top:18px}
.pm-section-body strong{color:var(--pm-white);font-weight:720}

.pm-principle{
  width:100%;
  max-width:var(--detail-copy-axis);
  margin:38px auto 0;
  padding-top:23px;
  border-top:1px solid var(--pm-line);
  color:var(--pm-white);
  font-size:clamp(1.08rem,1.55vw,1.38rem);
  font-weight:690;
  line-height:1.4;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.pm-noscript{
  max-width:var(--detail-body-width);
  margin:18px auto 0;
  color:var(--pm-ink);
  font-size:.95rem;
  line-height:1.65;
}

/* Datengrundlage */
.pm-foundation{
  padding-top:112px;
  background:linear-gradient(180deg,rgba(18,25,33,.94) 0%, rgba(13,17,23,.98) 32%, #0b0d11 68%, #0b0d11 100%);
}
.pm-urgency{font-weight:680}

.pm-foundation::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(203,183,127,.045) 0%,rgba(203,183,127,0) 18%,rgba(255,255,255,0) 82%,rgba(203,183,127,.03) 100%);
  opacity:.6;
}


.pm-data-line{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:15px;
  margin-top:42px;
  padding:26px 0;
  border-top:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pm-data-line span{
  color:rgba(244,241,232,.66);
  font:700 .70rem/1.25 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.075em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pm-data-line i{
  position:relative;
  height:1px;
  background:linear-gradient(90deg,rgba(203,183,127,.12),rgba(203,183,127,.48),rgba(203,183,127,.12));
}
.pm-data-line i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-3px;
  width:7px;
  height:7px;
  border:1px solid rgba(203,183,127,.45);
  border-radius:50%;
  background:#0d1117;
}

/* Sichtbare Merkmale: Datenquelle, bewusst ohne eigene Grafik. */
.pm-visible{
  background:linear-gradient(180deg,#0b0d11,#0c1117 52%,#0b0d11);
  border-top:1px solid rgba(203,183,127,.10);
  border-bottom:1px solid rgba(203,183,127,.10);
}

/* Vergleich und Übergabe */
.pm-calculation{padding-top:112px}
.pm-handoff{
  width:100%;
  max-width:var(--detail-body-width);
  margin:25px 0 0;
  padding:16px 18px;
  border-left:1px solid rgba(203,183,127,.62);
  color:rgba(245,243,238,.94);
  background:linear-gradient(90deg,rgba(203,183,127,.055),transparent 72%);
  font-size:1rem;
  font-weight:680;
  line-height:1.55;
}

/* -----------------------------------------------------------------
   140 → 46 → 1
   Quelle und Teilmenge nutzen dasselbe Raster, dieselbe Punktgröße
   und dieselbe Fläche. Nur die Anzahl der hervorgehobenen Punkte ändert sich.
   ----------------------------------------------------------------- */
.pm241-visual{
  display:grid;
  grid-template-columns:minmax(0,.9fr) 34px minmax(0,.9fr) 34px minmax(270px,1.18fr);
  align-items:stretch;
  margin-top:54px;
  border-top:1px solid rgba(203,183,127,.34);
  border-bottom:1px solid rgba(203,183,127,.18);
  background:radial-gradient(70% 100% at 82% 45%,rgba(203,183,127,.055),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.002));
  overflow:hidden;
}
.pm241-zone{min-width:0;padding:26px 18px 24px}
.pm241-count{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.pm241-count strong{
  color:var(--pm-white);
  font-size:clamp(3.35rem,5.4vw,5.35rem);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:760;
}
.pm241-count span{
  color:rgba(203,183,127,.86);
  font:700 .78rem/1.25 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.pm241-dot-grid{
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:5px;
  align-content:start;
  min-height:170px;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(7,9,13,.34);
}
.pm241-dot{
  display:block;
  width:6px;
  height:6px;
  margin:auto;
  border-radius:50%;
  transition:opacity .34s ease,transform .34s ease,background .34s ease,box-shadow .34s ease;
}
.pm241-source .pm241-dot{
  opacity:1;
  background:rgba(224,219,209,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.035);
}
.pm241-filtered .pm241-dot{
  opacity:.08;
  background:rgba(224,219,209,.28);
  box-shadow:none;
}
.pm241-filtered .pm241-dot.is-match{
  opacity:1;
  background:rgba(203,183,127,.90);
  box-shadow:0 0 9px rgba(203,183,127,.24);
}

.pm241-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(203,183,127,.48);
  border-left:1px solid rgba(203,183,127,.08);
  border-right:1px solid rgba(203,183,127,.08);
}
.pm241-arrow span{
  font-size:1.5rem;
  line-height:1;
  transition:opacity .32s ease,transform .32s ease;
}

.pm241-insight{
  background:linear-gradient(180deg,rgba(203,183,127,.04),rgba(255,255,255,.002));
}
.pm241-insight-card{
  border:1px solid rgba(203,183,127,.36);
  background:linear-gradient(145deg,rgba(203,183,127,.075),rgba(255,255,255,.004));
  transition:opacity .36s ease,transform .36s ease;
}
.pm241-insight-card>div{padding:19px 20px;border-top:1px solid rgba(203,183,127,.14)}
.pm241-insight-card>div:first-child{border-top:0;border-left:2px solid rgba(223,206,157,.82)}
.pm241-insight-card span{
  display:block;
  margin-bottom:9px;
  color:rgba(203,183,127,.80);
  font:700 .70rem/1.25 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.11em;
}
.pm241-insight-card strong{
  display:block;
  color:var(--pm-white);
  font-size:1rem;
  line-height:1.42;
}
.pm241-insight-card>div:first-child strong{
  font-size:clamp(1.32rem,1.65vw,1.62rem);
  line-height:1.12;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.pm241-insight-card p{
  margin:10px 0 0;
  color:rgba(245,243,238,.72);
  font-size:.95rem;
  line-height:1.58;
}

.js .pm241-visual:not(.is-visible) .pm241-source .pm241-dot,
.js .pm241-visual:not(.is-visible) .pm241-filtered .pm241-dot{opacity:0;transform:scale(.55)}
.js .pm241-visual:not(.is-visible) .pm241-arrow span{opacity:0;transform:translateX(-8px)}
.js .pm241-visual:not(.is-visible) .pm241-insight-card{opacity:0;transform:translateY(10px)}
.js .pm241-visual.is-visible .pm241-source .pm241-dot{transition-delay:0s}
.js .pm241-visual.is-visible .pm241-arrow--one span{transition-delay:.34s}
.js .pm241-visual.is-visible .pm241-filtered .pm241-dot{transition-delay:.5s}
.js .pm241-visual.is-visible .pm241-arrow--two span{transition-delay:.82s}
.js .pm241-visual.is-visible .pm241-insight-card{transition-delay:1s}

/* CTA */
.pm-next{background:linear-gradient(180deg,#0d1218,#0b0d11)}
.pm-next .pm-section-head{margin-left:0!important;margin-right:0!important}
.pm-next .detail-cta-actions{margin-top:28px}

/* Sichtbare Texte dieser Seite bleiben oberhalb von 11 px. */
.pm-page .detail-page-nav__label,
.pm-page .detail-page-next-label,
.pm-page .hero-gold-claim{font-size:.70rem!important}

@media (max-width:1180px){
  .pm241-visual{
    grid-template-columns:1fr 46px 1fr;
    grid-template-areas:"source arrow1 filtered" "insight insight insight";
  }
  .pm241-source{grid-area:source}
  .pm241-arrow--one{grid-area:arrow1}
  .pm241-filtered{grid-area:filtered}
  .pm241-arrow--two{display:none}
  .pm241-insight{grid-area:insight;border-top:1px solid rgba(203,183,127,.13)}
  .pm241-insight-card{max-width:760px}
  .pm241-insight-card>div:first-child strong{white-space:normal}
}

@media (max-width:860px){
  .pm-page .container.pm-wide{width:min(calc(100% - 30px),820px)}
  .pm-section{padding:78px 0}
  .pm-section-lead{margin-top:20px}
  .pm-section-body{margin-top:28px}
  .pm-data-line{
    grid-template-columns:1fr;
    gap:0;
    margin-top:34px;
    padding:0;
    border:1px solid rgba(255,255,255,.065);
  }
  .pm-data-line span{padding:14px 17px;border-top:1px solid rgba(255,255,255,.05)}
  .pm-data-line span:first-child{border-top:0}
  .pm-data-line i{display:none}
  .pm241-visual{
    grid-template-columns:1fr;
    grid-template-areas:"source" "arrow1" "filtered" "arrow2" "insight";
  }
  .pm241-arrow{
    min-height:52px;
    border:0;
    border-top:1px solid rgba(203,183,127,.08);
    border-bottom:1px solid rgba(203,183,127,.08);
  }
  .pm241-arrow span{transform:rotate(90deg)}
  .pm241-arrow--two{display:flex;grid-area:arrow2}
  .pm241-zone{padding:26px 22px}
  .pm241-dot-grid{min-height:160px}
}

@media (max-width:520px){
  .pm-page .pm-section-head>.eyebrow{margin-bottom:18px}
  .pm-section-lead,.pm-section-body p{font-size:.95rem;line-height:1.68}
  .pm241-count strong{font-size:3.45rem}
  .pm241-count span,
  .pm241-insight-card span,
  .pm-data-line span,
  .pm241-dot-grid{grid-template-columns:repeat(14,1fr);gap:5px;padding:17px}
  .pm241-dot{width:5px;height:5px}
}

@media (prefers-reduced-motion:reduce){
  .pm241-dot,.pm241-arrow span,.pm241-insight-card{transition:none!important}
  .js .pm241-visual:not(.is-visible) .pm241-source .pm241-dot,
  .js .pm241-visual:not(.is-visible) .pm241-filtered .pm241-dot,
  .js .pm241-visual:not(.is-visible) .pm241-arrow span,
  .js .pm241-visual:not(.is-visible) .pm241-insight-card{opacity:1;transform:none}
}


/* v248 · Kompakteres Beispiel: 84 → 28 → 7, ein Hinweis wird angeteasert. */
.pm241-insight .pm241-count{align-items:baseline}
.pm241-insight-card > div:first-child > span{line-height:1.45}
@media (min-width: 861px){
  .pm241-insight-card > div:first-child > strong{white-space:nowrap}
}