/* ==========================================================================
Timeline: nummerierte, vertikal verbundene Schrittliste.

Markup:
  <ol class="timeline">
    <li>
      <h3>Schritt-Titel</h3>
      <p>Beschreibung …</p>
    </li>
    …
  </ol>

Die Nummerierung erzeugt ein CSS-Counter, die Verbindungslinie die linke
Rahmenkante der <li>.
========================================================================== */

ol.timeline {
    list-style: none;
    counter-reset: step;
    margin: 2.5rem 0 0;
    padding: 0;

    li {
        counter-increment: step;
        position: relative;
        padding: 0 0 2rem 3.5rem;
        border-left: 2px solid var(--line);

        &:last-child {
            border-left-color: transparent;
            padding-bottom: 0;
        }

        &:before {
            content: counter(step);
            position: absolute;
            left: -1.15rem;
            top: -0.2rem;

            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;

            background: var(--accent);
            color: var(--white);
            border: 0.16rem solid var(--white);
            outline: 0.16rem solid var(--accent);

            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 0.95rem;
        }

        h3 {
            color: var(--title);
            font-weight: 500;
            font-size: 1.15rem;
            margin-bottom: 0.4rem;
        }

        p {
            text-align: justify;
            margin: 0;
        }
    }
}