.ar-schichten .ar-h2 { font-size: calc(clamp(32px, 4vw, 54px) * var(--f-h2)); }
.ar-schichten__stapel { position: relative; padding-left: 40px; }
.ar-schichten__stapel::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--pink-on-dark) 0%, var(--magenta) 100%);
}
.ar-schichten__ende { position: relative; font-size: calc(12px * var(--f-klein)); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ar-schichten__ende::before { content: ""; position: absolute; left: -39px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--anthracite); border: 2px solid var(--pink-on-dark); box-sizing: border-box; }
.ar-schichten__ende--unten::before { background: var(--magenta); border-color: var(--magenta); }
.ar-schichten__ende--oben { padding-bottom: 18px; }
.ar-schichten__ende--unten { padding-top: 18px; }

.ar-schichten__liste { list-style: none; margin: 0; padding: 0; }
.ar-schicht { position: relative; display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line-dark); }
.ar-schicht:last-child { border-bottom: 1px solid var(--line-dark); }
/* Alle Zeilen teilen ein Raster: Text steht in einer Flucht, egal wie lang der Link ist oder ob er fehlt.
   Ohne Subgrid-Unterstuetzung feste Linkspalte. */
.ar-schicht { grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) minmax(0, 1.4fr) 11.5em; }
@supports (grid-template-columns: subgrid) {
  .ar-schichten__liste { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: 32px; }
  .ar-schicht { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.ar-schicht__link { grid-column: 4; justify-self: end; }
.ar-schicht::before { content: ""; position: absolute; left: -37px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; transition: transform .25s, background-color .25s; }
.ar-schicht__balken { display: block; height: 52px; width: var(--breite); margin: 0 auto; background: rgba(236, 0, 140, var(--deckung)); border-top: 2px solid rgba(255, 255, 255, .5); transition: background-color .3s, transform .3s; }
.ar-schicht__kicker { font-size: calc(12px * var(--f-klein)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-on-dark); }
.ar-schicht__titel { margin-top: 6px; font-size: calc(clamp(24px, 2.5vw, 32px) * var(--f-h3)); font-weight: 700; letter-spacing: -.03em; }
.ar-schicht__text { font-size: calc(16.5px * var(--f-text)); line-height: 1.55; font-weight: 300; color: rgba(255, 255, 255, .78); max-width: 52ch; }
.body-wrapper .ar-schicht__link { font-weight: 700; font-size: calc(15px * var(--f-text)); color: #fff; white-space: nowrap; border-bottom: 1.5px solid rgba(255, 255, 255, .35); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.body-wrapper .ar-schicht__link:hover { color: var(--pink-on-dark); border-color: var(--pink-on-dark); }
.ar-schicht:hover::before { background: var(--magenta); transform: scale(1.6); }
.ar-schicht:hover .ar-schicht__balken { background: var(--magenta); transform: scaleY(1.12); }

@media (max-width: 1080px) {
  .ar-schichten__liste { display: block; }
  .ar-schicht { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px 32px; }
  .ar-schicht__balken { grid-column: 1 / -1; height: 20px; margin: 0; max-width: 360px; }
  .ar-schicht__link { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) {
  .ar-schichten__stapel { padding-left: 30px; }
  .ar-schichten__ende::before { left: -29px; }
  .ar-schicht { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .ar-schicht::before { left: -27px; top: 36px; }
  .ar-schicht__link { grid-column: 1; }
}