/* ==========================================================================
#explorer-path – "Reise zum Gipfel": img/pfad.webp zeigt den gezeichneten
Bergkamm mit Wanderweg (Rand des Original-Exports jeweils weggeschnitten,
siehe Maße/Koordinaten direkt im HTML-Kommentar bei .path-ridge-markers).
Die vier Marker-Punkte sitzen als SVG (.path-ridge-markers) bei x=12.5/37.5/
62.5/87.5% der Bildfläche (viewBox-Breite=100 = Bildbreite, viewBox-Höhe =
Bildhöhe/Bildbreite × 100 fürs Bild-Seitenverhältnis, daher bleiben die
Kreise rund und gilt für beide Achsen derselbe Maßstab) – das sind die
exakten Mitten der vier gleich breiten Spalten in .path-steps weiter unten,
die Grafik sollte ihre Wegpunkte auf dieselben x-Werte legen. Von jedem
Marker läuft in derselben
SVG eine gestrichelte Akzent-Linie (.path-ridge-connector) bis zum unteren
Bildrand – sie liegt also sichtbar über dem Bild. Darunter führt eine
zweite, schmale SVG-Leiste (.path-connectors, viewBox 0 0 100 10, gestreckt)
dieselbe gestrichelte Linie von denselben x-Werten nahtlos weiter nach unten
zu den vier Etappen (<ol class="timeline path-steps">, Grundform aus
css/timeline.css).

Mobil/Tablet (< 900px, Default): normale timeline-Darstellung – nummerierte
Kreise, linksbündige Verbindungslinie, Text rechts daneben. Die
.path-connectors-Leiste ist hier ausgeblendet (sie gehört zum 4-Spalten-Grid).

Desktop (≥ 900px): .path-steps wird zu einem 4-Spalten-Grid, die
timeline-Kreise verschwinden (die Verbindung übernimmt jetzt die
.path-connectors-Leiste direkt über der Liste).
========================================================================== */

/* Kopfbereich: Eyebrow+Headline links, Intro-Absatz rechts (.inner.dual aus
base.css), vertikal zentriert statt am Grid-Zeilenanfang ausgerichtet. */
#explorer-path .inner.dual {
    align-items: flex-end;
}

.path-ridge {
    position: relative;
    margin: 0;

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

.path-dot {
    fill: var(--white);
    stroke: var(--accent);
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.path-dot-summit {
    fill: var(--accent);
    stroke: var(--white);
    stroke-width: 2;
}

/* Ziffern in den Marker-Punkten – nur mobil/Tablet sichtbar (Default), wo die
   Etappen darunter ebenfalls als nummerierte Kreise (ol.timeline-Counter)
   erscheinen. Am Desktop entfällt die Nummerierung, siehe Media Query unten. */
.path-dot-number {
    fill: var(--accent);
    font-size: 2.1px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

.path-dot-number-summit {
    fill: var(--white);
}

.path-ridge-connector {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.path-connectors {
    display: none;
    width: 100%;
    height: 1.75rem;

    line {
        stroke: var(--accent);
        stroke-width: 2;
        stroke-dasharray: 4 4;
        vector-effect: non-scaling-stroke;
    }
}

.path-step-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;

    &:hover,
    &:focus-visible {
        transform: translateY(0.3rem);
    }
}

.path-step-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.path-step-summit .path-step-eyebrow {
    color: var(--accent);
}

@media (min-width: 900px) {
    .path-connectors {
        display: block;
    }

    .path-dot-number {
        display: none;
    }

    .path-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* ol.timeline setzt margin-top:2.5rem (Abstand zum Kamm); hier übernimmt
       die .path-connectors-Leiste diesen Abstand, daher auf 0 setzen – braucht
       zwei Klassen, um ol.timeline (1 Klasse + 1 Typ) zu schlagen. */
    .timeline.path-steps {
        margin-top: 0;
    }

    /* .timeline.path-steps statt .path-steps, um die ol.timeline-Regeln aus
       css/timeline.css (gleiche oder höhere Spezifität) sicher zu schlagen. */
    .timeline.path-steps li {
        border-left: none;
        padding: 0.75rem 0.5rem 0;
        text-align: center;

        /* Grid-Items haben per Default min-width:auto und würden ihre Spalte
           auf die Breite des längsten unteilbaren Worts (z. B.
           "Maschinendatenerfassung") aufziehen – dadurch wären die vier
           1fr-Spalten trotz gleicher Definition unterschiedlich breit. */
        min-width: 0;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .timeline.path-steps li:before {
        content: none;
    }

    /* ol.timeline li h3 (css/timeline.css) setzt 1.15rem – in den schmalen
       4er-Spalten bricht z. B. "Betriebsdatenerfassung" damit um. */
    .timeline.path-steps li h3 {
        font-size: 0.95rem;
    }

    /* p{text-align:justify} (base.css) ist eine direkte Regel auf <p> und
       schlägt daher das ererbte text-align:center von li – explizit nötig.
       font-size verkleinert passend zur h3 oben, sonst wirkt der Fließtext
       in den schmalen 4er-Spalten überdimensioniert. */
    .timeline.path-steps li p {
        text-align: center;
        font-size: 0.8rem;
    }
}

/* Unter 900px bleibt die Etappenliste die normale timeline-Darstellung aus
css/timeline.css; nur der Kamm wird schmaler gehalten, damit er auf Mobil
kompakt bleibt. */
@media (max-width: 899px) {
    .path-ridge {
        margin: 0 -6vw;
    }

    .path-ridge-connector {
        display: none;
    }

    /* Punkte vergrößern, damit die Ziffern darin lesbar Platz haben – am
       Desktop bleiben .path-dot/-summit in Originalgröße, dort sind die
       Ziffern ohnehin ausgeblendet (s.o.). */
    .path-dot {
        r: 1.9px;
    }

    .path-dot-summit {
        r: 2.4px;
    }
}