/* sumalu V09: three interactive phases with cross-phase governance.
   Self-contained, responsive and accessible. All typography uses local Jost. */
.home #leistungen .section-head {max-width:820px;margin-bottom:35px}
.phase-experience {max-width:1160px;margin:0 auto}
.phase-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.phase-card {
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:443px;
  text-align:left;padding:25px 25px 19px;background:#fff;border:1px solid #cbdbe4;
  border-radius:9px;color:var(--ink);cursor:pointer;box-shadow:none;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
  font-family:var(--sans)
}
.phase-card:nth-child(-n+2)::after {
  content:"\2192";position:absolute;right:-26px;top:44%;z-index:2;
  font-size:24px;line-height:1;color:var(--navy-2);font-weight:300;pointer-events:none
}
.phase-card-top {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:64px}
.phase-number {font-size:64px;line-height:1;font-weight:300;letter-spacing:-.06em;color:var(--sumalu-blue,#2B88BE);font-variant-numeric:tabular-nums}
.phase-icon,.governance-badge {display:flex;align-items:center;justify-content:center;flex:none;background:#edf5f9;border-radius:50%;color:var(--ink)}
.phase-icon{width:67px;height:67px;transition:background .25s ease,transform .25s ease}
.phase-icon svg{width:41px;height:41px}
.phase-icon .icon-accent,.governance-badge .icon-accent{stroke:#BD7220}
.phase-title{display:block;margin-top:20px;min-height:60px;font-weight:600;font-size:clamp(21px,2.1vw,25px);line-height:1.21;letter-spacing:-.01em;overflow-wrap:normal}
.phase-question{display:block;color:var(--navy-2);font-size:14px;line-height:1.5;margin-top:5px}
.phase-teaser{display:block;margin-top:20px;font-size:16px;line-height:1.55;color:var(--text)}
.phase-outcome{display:block;margin-top:auto;padding-top:18px;border-top:1px solid #dbe5e8;font-size:15px;line-height:1.5;color:var(--ink)}
.phase-outcome .outcome-label{display:block;color:#995A16;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:10px;margin-bottom:6px}
.phase-affordance{display:inline-flex;align-items:center;gap:6px;color:var(--navy-2);font-size:12px;letter-spacing:.02em;font-weight:600;margin-top:18px}
.phase-affordance .mini-arrow,.governance-more {display:inline-block;transition:transform .2s ease}
.phase-card.is-selected{border-color:var(--sumalu-blue);box-shadow:0 0 0 1px rgba(43,136,190,.18)}
.phase-card:focus-visible,.governance-strip:focus-visible{outline:3px solid var(--sumalu-blue);outline-offset:4px}
.phase-connectors {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;height:28px;pointer-events:none}
.phase-connectors span{justify-self:center;height:100%;border-left:1px dashed #b8d2df}
.governance-strip {
  display:grid;grid-template-columns:64px 1.04fr .95fr 19px;align-items:center;gap:17px;
  width:100%;padding:22px 25px;background:#eff5f8;color:var(--ink);
  border:1px solid #cbdce5;border-radius:80px;text-align:left;font-family:var(--sans);
  cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease
}
.governance-badge{width:60px;height:60px;background:#e0edf5}
.governance-badge svg{width:41px;height:41px}
.governance-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.governance-kicker{font-size:10px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;color:var(--navy-2)}
.governance-name strong{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.governance-question{font-size:13px;color:var(--navy-2);line-height:1.4;margin-top:2px}
.governance-text{padding-left:24px;border-left:1px solid #c3d6e0;font-size:15px;line-height:1.55;color:var(--text)}
.governance-more{font-size:17px;color:var(--navy-2);justify-self:end}
.governance-strip.is-selected{border-color:var(--sumalu-blue);background:#e9f3f7}
.phase-detail-region{scroll-margin-top:calc(var(--header-h) + 18px);margin:27px 0 0}
.phase-ready .phase-detail-panel:not(.is-open){display:none}
.phase-detail-panel{scroll-margin-top:calc(var(--header-h) + 26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;border-top:1px solid #cbd7df;padding:27px 0 6px;color:var(--ink)}
.phase-detail-topline{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.detail-index,.detail-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-2)}
.detail-index{font-variant-numeric:tabular-nums}
.phase-detail-intro h3{font-size:clamp(20px,2vw,24px);font-weight:600;margin:0 0 13px;line-height:1.28;letter-spacing:-.01em}
.phase-detail-intro>p,.phase-detail-region .project-proof p{font-size:16px;line-height:1.66;color:var(--text)}
.phase-detail-intro .detail-outcome{margin-top:17px;font-size:15px;line-height:1.6}
.detail-outcome strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#995A16;margin-bottom:3px}
.detail-outcome span{font-weight:500}
.home .phase-detail-region .project-proof{margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.home .phase-detail-region .project-proof h4{font-family:var(--sans);font-size:11px;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;font-weight:600;color:var(--navy-2);margin:4px 0 12px}
.home .phase-detail-region .project-proof p{font-size:16px!important;line-height:1.69!important;color:var(--text)!important}
.governance-detail-panel .governance-scope{font-weight:600;margin-top:14px;font-size:14px}
@media (hover:hover) and (pointer:fine) {
 .phase-card:hover{transform:translateY(-4px);border-color:var(--sumalu-blue);box-shadow:0 15px 32px -26px rgba(15,30,51,.45)}
 .phase-card:hover .phase-icon{background:#e5f3fa;transform:scale(1.055)}
 .phase-card:hover .mini-arrow,.governance-strip:hover .governance-more{transform:translate(2px,-2px)}
 .governance-strip:hover{background:#e6f1f6;border-color:var(--sumalu-blue);transform:translateY(-2px)}
}
@media (max-width:1090px){
 .phase-grid{gap:23px}.phase-card{padding:22px 20px 18px;min-height:460px}
 .phase-card:nth-child(-n+2)::after{right:-22px}.phase-title{font-size:22px}
 .phase-teaser{font-size:15px}.phase-outcome{font-size:14px}
 .governance-name strong{font-size:20px}
}
@media (max-width:850px){
 .phase-grid{grid-template-columns:1fr;gap:36px;max-width:600px;margin:auto}
 .phase-card{min-height:0;padding:25px 28px 24px}
 .phase-card:nth-child(-n+2)::after{content:"\2193";left:50%;right:auto;top:auto;bottom:-34px;transform:translateX(-50%);font-size:26px}
 .phase-title{min-height:0;margin-top:15px;font-size:25px}
 .phase-teaser{margin-top:16px;font-size:16px;min-height:0}
 .phase-outcome{margin-top:22px;padding-top:15px;font-size:15px}
 .phase-affordance{margin-top:15px}
 .phase-connectors{max-width:600px;margin:auto;height:20px;display:flex;justify-content:center}
 .phase-connectors span{display:none}.phase-connectors span:nth-child(2){display:block}
 .governance-strip{max-width:690px;margin:auto;grid-template-columns:54px minmax(0,1fr) 15px;gap:11px 15px;border-radius:20px;padding:22px 24px}
 .governance-badge{width:54px;height:54px}
 .governance-badge svg{width:36px;height:36px}
 .governance-name strong{font-size:21px}
 .governance-text{grid-column:2;grid-row:2;padding:0;border-left:0;font-size:15px}
 .governance-more{grid-column:3;grid-row:1}
 .phase-detail-panel{gap:30px;grid-template-columns:1fr;max-width:680px;margin:auto}
}
@media (max-width:560px){
 .home #leistungen .section-head{margin-bottom:29px}
 .phase-grid{gap:33px}
 .phase-card{padding:20px 21px 20px;border-radius:7px}
 .phase-card-top{min-height:54px}
 .phase-number{font-size:58px}
 .phase-icon{width:58px;height:58px}.phase-icon svg{width:35px;height:35px}
 .phase-title{font-size:24px;line-height:1.22;margin-top:14px}
 .phase-question{font-size:14px}
 .phase-teaser{font-size:16px;margin-top:16px}
 .phase-outcome{font-size:15px;margin-top:22px}
 .phase-card:nth-child(-n+2)::after{bottom:-32px}
 .phase-connectors{height:18px}
 .governance-strip{border-radius:13px;padding:18px 18px 20px;grid-template-columns:46px minmax(0,1fr) 14px;gap:9px 11px}
 .governance-badge{height:46px;width:46px}.governance-badge svg{height:32px;width:32px}
 .governance-kicker{font-size:9px}
 .governance-name strong{font-size:19px;line-height:1.2}
 .governance-question{font-size:13px}
 .governance-text{grid-column:1/-1;grid-row:2;font-size:15px;line-height:1.6;margin-top:6px}
 .governance-more{font-size:14px}
 .phase-detail-region{margin-top:21px}
 .phase-detail-panel{padding:25px 0 5px;gap:23px}
 .phase-detail-intro h3{font-size:23px}
 .phase-detail-intro>p,.home .phase-detail-region .project-proof p{font-size:16px!important;line-height:1.7!important}
 .home .phase-detail-region .project-proof h4{margin-bottom:9px}
}
/* Scroll entrance: only when IntersectionObserver is supported and motion is allowed. */
@media (prefers-reduced-motion:no-preference){
 .reveal-ready [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .56s ease,transform .56s cubic-bezier(.22,1,.36,1),border-color .24s ease,box-shadow .24s ease;background-color .24s ease;transition-delay:calc(var(--reveal-order,0) * 60ms)}
 .reveal-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
 .reveal-ready [data-reveal].is-visible:hover{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
 .phase-card,.governance-strip,.phase-icon,.phase-affordance .mini-arrow,.governance-more{transition:none!important;transform:none!important}
}
@media print {
 .phase-detail-panel {display:grid!important;break-inside:avoid}
 .phase-card,.governance-strip{break-inside:avoid}
 .phase-card:nth-child(-n+2)::after,.phase-connectors{display:none}
}