/* ============================================================
   BEREICHSTYP "ABLAUF / ETAPPEN"
   ============================================================

   Etappen untereinander, verbunden durch eine durchgehende Linie.
   Die Markierung auf der Linie ist wählbar – Nummern, Punkte oder
   gar keine.

   Breite und Position liegen in section-layout.css und gelten
   für alle Bereichstypen.
   ============================================================ */


/* === KOPF UND EINLEITUNG === */

.flow-section__head {
    margin-bottom: 1.75rem;
    width: 100%;
}

.flow-section__intro {
    margin-bottom: 3rem;
    width: 100%;
}


/* === DIE ETAPPENLISTE ===

   --flow-marker ist die Größe des Markers, --flow-gap sein Abstand
   zum Text, --flow-gap-y der Abstand zwischen den Etappen. Alle drei
   steuern zugleich die Einrückung und die Linie, damit die Teile
   immer zusammenpassen. */

.flow {
    --flow-marker: 2.5rem;
    --flow-gap: 1.5rem;
    --flow-gap-y: 2.75rem;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--flow-gap-y);
    width: 100%;
    margin: 0;
    padding: 0 0 0 calc(var(--flow-marker) + var(--flow-gap));
    list-style: none;
    counter-reset: flow;
}

/* Die Markierung deckt die Linie in ihrer vollen Größe ab. Beim
   Nummernkreis ist das richtig, ein kleiner Punkt bekäme dadurch eine
   unnötig große Lücke – deshalb hier ein kleinerer Marker. Marker und
   Abstand ergeben weiter zusammen 4rem, damit der Text unabhängig von
   der Markierung gleich weit eingerückt bleibt. */
.flow--punkte {
    --flow-marker: 1.25rem;
    --flow-gap: 2.75rem;
}

/* Ohne Markierung bleibt die Linie als einziges verbindendes Element –
   dann soll sie auch ununterbrochen durchlaufen. */
.flow--ohne {
    --flow-marker: 0rem;
    --flow-gap: 2rem;
}

.flow--ohne .flow__marker {
    display: none;
}

.flow__step {
    position: relative;
    counter-increment: flow;
}

/* Jede Etappe zieht die Linie zu ihrem Nachfolger – die letzte zieht
   keine. Eine durchgehende Linie am <ol> wäre einfacher, liefe aber
   unter der letzten Markierung noch bis zum Ende der Beschreibung
   weiter und damit sichtbar ins Leere. Die Markierungen liegen mit
   eigener Hintergrundfarbe darüber und decken die Linie ab. */
.flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: calc(var(--flow-gap-y) * -1);
    left: calc((var(--flow-marker) + var(--flow-gap)) * -1 + var(--flow-marker) / 2);
    width: 1px;
    background-color: hsla(var(--foreground-01-values), 0.18);
}


/* === MARKIERUNG === */

.flow__marker {
    position: absolute;
    /* Auf Höhe der ersten Zeile des Titels, nicht an dessen Oberkante */
    top: -0.15em;
    left: calc((var(--flow-marker) + var(--flow-gap)) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flow-marker);
    height: var(--flow-marker);
    border-radius: 50%;
    /* Deckt die Linie dahinter ab */
    background-color: var(--section-background, var(--background-04));
}

.flow--nummern .flow__marker {
    border: 1px solid var(--accent-01);
    color: var(--accent-01);
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: var(--font-weight-heading);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.flow--nummern .flow__marker::before {
    content: counter(flow);
}

.flow--punkte .flow__marker::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--accent-01);
}

/* === INHALT EINER ETAPPE === */

.flow__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flow__title {
    margin: 0;
    font-size: var(--headline-s);
    line-height: 1.25;
    text-wrap: balance;
}

/* Der Zusatz steht als eigene Zeile unter dem Titel, nicht dahinter:
   zusammen in einer Zeile ergäben beide bei längeren Titeln einen
   unruhigen Umbruch. */
.flow__subtitle {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    font-weight: var(--font-weight-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--foreground-04);
}

.flow__text {
    line-height: 1.7;
}

.flow__text > *:first-child {
    margin-top: 0;
}

.flow__text > *:last-child {
    margin-bottom: 0;
}

.flow__text p {
    margin: 0 0 0.75em;
}


/* === AKZENTFLÄCHEN ===
   Auf eingefärbten Flächen kommt die Schriftfarbe aus
   backgrounds.css; hier ziehen Linie und Marker nach. */

.extra-section--bg-akzent .flow__step::before,
.mta-bg--dark .flow__step::before {
    background-color: hsla(var(--background-05-values), 0.3);
}

.extra-section--bg-akzent .flow--nummern .flow__marker,
.mta-bg--dark .flow--nummern .flow__marker {
    border-color: currentColor;
    color: inherit;
}

.extra-section--bg-akzent .flow--punkte .flow__marker::before,
.mta-bg--dark .flow--punkte .flow__marker::before {
    background-color: currentColor;
}

/* Der Marker deckt die Linie ab und braucht deshalb die Farbe der
   Fläche, auf der er liegt. Bei eigenen Hintergrundfarben steht sie
   in --section-background, sonst greift die Abstufung des Bereichs. */
.extra-section--bg-alternativ .flow__marker {
    background-color: var(--section-background, var(--background-01));
}

.extra-section--bg-akzent .flow__marker {
    background-color: var(--section-background, var(--accent-01));
}


/* === KLEINE BILDSCHIRME === */

@media (max-width: 767px) {
    .flow {
        --flow-marker: 2rem;
        --flow-gap: 1rem;
        --flow-gap-y: 2.25rem;
    }

    /* Müssen mit: .flow steht hier später und überschriebe sonst die
       Werte der Varianten von oben. */
    .flow--punkte {
        --flow-marker: 1rem;
        --flow-gap: 2rem;
    }

    .flow--ohne {
        --flow-marker: 0rem;
        --flow-gap: 1.5rem;
    }

    .flow-section__intro {
        margin-bottom: 2.25rem;
    }
}