/* Ablauf mit Schiff (27.10.2026): Ein Schiff fährt beim Scrollen die Schritte eines Ablaufs ab (aus /black-friday/ übernommen).
   .as-route[data-as="liste"]: Schrittliste; Desktop Wellenlinie oben, Handy senkrechte Linie links; Schritte leuchten auf.
   .as-route[data-as="reise"]: senkrechter Zeitstrahl p4-reise mit eigener Linie; das Schiff fährt auf dieser Linie.
   Ohne JS und bei reduzierter Bewegung: Schiff steht am Ziel, alle Schritte voll sichtbar. */

.as-route { position: relative; --as-farbe: #a8823c; --as-linie: rgba(168, 130, 60, .35); }
.as-route[data-as-dunkel] { --as-farbe: #f3d79c; --as-linie: rgba(226, 189, 114, .35); }
.as-karte { position: absolute; pointer-events: none; z-index: 2; }
.as-karte svg.as-pfade { width: 100%; height: 100%; overflow: visible; }
.as-pfad { fill: none; stroke: var(--as-linie); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.as-fahrt { fill: none; stroke: var(--as-farbe); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(226, 189, 114, .7)); }
.as-schiff { position: absolute; width: 44px; height: 44px; color: var(--as-farbe); filter: drop-shadow(0 6px 10px rgba(8, 31, 48, .35)); will-change: translate; }

/* Liste, Desktop: Wellenlinie über den Schritten */
@media (min-width: 761px) {
  .as-route[data-as="liste"] { padding-top: 66px; }
  .as-route[data-as="liste"] .as-karte { left: 0; right: 0; top: 0; height: 56px; }
  .as-route[data-as="liste"] .as-schiff { left: 0; top: 2px; translate: calc(var(--as-f, 1) * (100cqw - 44px)) 0; }
  .as-route[data-as="liste"] { container-type: inline-size; }
}
/* Liste, Handy: senkrechte Linie links */
@media (max-width: 760px) {
  .as-route[data-as="liste"] { padding-left: 34px; }
  .as-route[data-as="liste"] .as-karte { left: 0; top: 0; bottom: 0; width: 34px; }
  .as-route[data-as="liste"] .as-pfade { display: none; }
  .as-route[data-as="liste"] .as-karte::before, .as-route[data-as="liste"] .as-karte::after { content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
  .as-route[data-as="liste"] .as-karte::before { background: var(--as-linie); }
  .as-route[data-as="liste"] .as-karte::after { background: var(--as-farbe); transform-origin: top; transform: scaleY(var(--as-f, 1)); box-shadow: 0 0 8px rgba(226, 189, 114, .6); }
  .as-route[data-as="liste"] .as-schiff { width: 30px; height: 30px; left: -2px; top: 0; translate: 0 calc(var(--as-f, 1) * (var(--as-h, 100px) - 30px)); }
}
/* Reise: Schiff auf der vorhandenen senkrechten Linie */
.as-route[data-as="reise"] .as-karte { inset: 0; z-index: 0; }
.as-route[data-as="reise"] .as-pfade { display: none; }
.as-route[data-as="reise"] .as-schiff { left: calc(var(--as-x, 36px) - 22px); top: 0; translate: 0 calc(var(--as-y0, 0px) + var(--as-f, 1) * var(--as-weg, 0px)); }

/* Schritte leuchten auf (nur Liste) */
html.as-an .as-route[data-as="liste"] [data-as-schritte] > li { transition: opacity .6s ease, translate .6s ease; }
html.as-an .as-route[data-as="liste"] [data-as-schritte] > li:not(.as-erreicht) { opacity: .45; }
.as-route [data-as-schritte] > li.as-erreicht > span:first-child { animation: as-puls 1.2s ease-out 1; }
@keyframes as-puls { 0% { text-shadow: 0 0 0 rgba(226, 189, 114, 0); } 35% { text-shadow: 0 0 18px rgba(226, 189, 114, .95), 0 0 4px rgba(226, 189, 114, .9); } 100% { text-shadow: 0 0 0 rgba(226, 189, 114, 0); } }

@media (prefers-reduced-motion: reduce) {
  .as-route .as-schiff, .as-route [data-as-schritte] > li { transition: none !important; animation: none !important; }
}

/* 28.10.: Linie endet an der letzten Etappe statt am Textende (--as-weg setzt ablauf-schiff.js) */
.as-route[data-as="reise"] .p4-reise__weg::before,
.as-route[data-as="reise"] .p4-reise__weg::after { bottom: auto; height: var(--as-weg, calc(100% - 72px)); }