/* AIT Group, Arbeitsweise auf der Startseite (Praefix wy-).
   Vier Phasen als Zeilen im Raster: Phase links, Name und Text in der Mitte, Ergebnis und Entscheid rechts.
   Beim Scrollen wird die Phase in der Bildschirmmitte hervorgehoben. Grundlagen in home.css. */
.wy-step{display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap);row-gap:12px;align-items:start;
  padding:var(--cell) 0 clamp(32px,5vh,56px);border-top:1px solid var(--rule)}
.wy-step:last-child{border-bottom:1px solid var(--rule)}
.wy-n{grid-column:1;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-3)}
.wy-n b{font-weight:500;color:var(--violet);margin-left:10px}
.wy-body{grid-column:2;min-width:0}
.wy-step h3{font-size:clamp(40px,min(4.6vw,8.4vh),80px);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--ink);margin-top:-.08em!important;transition:color 600ms ease}
.wy-body p{margin-top:clamp(14px,2.2vh,22px)!important;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:34em}
.wy-dl{grid-column:3;display:grid;gap:14px;min-width:0}
.wy-dl dt{font-size:13px;line-height:1.4;font-weight:500;color:var(--ink-3)}
.wy-dl dd{margin-top:3px!important;font-size:14.5px;line-height:1.45;color:var(--ink)}
.wy-body p,.wy-dl{transition:opacity 600ms ease}

/* Mit JavaScript: nur die Phase in der Bildschirmmitte ist voll sichtbar */
.wy.is-js .wy-step h3{color:rgba(13,16,21,.18)}
.wy.is-js .wy-body p,.wy.is-js .wy-dl{opacity:.4}
.wy.is-js .wy-step.is-on h3{color:var(--ink)}
.wy.is-js .wy-step.is-on .wy-body p,.wy.is-js .wy-step.is-on .wy-dl{opacity:1}

@media (max-width:1100px){
  .wy-dl{grid-column:2/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;margin-top:10px;max-width:40em}
}
@media (max-width:900px){
  .wy-step{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .wy-n,.wy-body,.wy-dl{grid-column:1}
  .wy-step h3{font-size:clamp(40px,12vw,64px)}
}
@media (max-width:480px){
  .wy-dl{grid-template-columns:minmax(0,1fr)}
}