/* youpartments Gästeportal – Unterseiten #/anreise und #/apartment (Lane LOWER, Modul „subviews“, lazy über
   GP.lazy). Signatur Linienplan: Wege als Haltestellen an einer Linie in Akzentfarbe, zu Fuß gepunktet.
   Nur Tokens aus styles.css (Farben, Raster, Formen). */

.subpage-body > .msg .actions { margin-top: 12px; }
.sub-videos { max-width: 560px; }
.sub-steps { background: var(--karte); border: 1px solid var(--line); border-radius: var(--rund-gross); padding: 0 var(--r2); box-shadow: var(--schatten); }
.sub-steps > .accordion { border-top: 0; }
.sub-steps > .accordion:last-child { border-bottom: 0; }
.sub-steps .step-list { gap: var(--r1); }
.sub-steps .note { margin-top: 12px; }
.sub-name { font-weight: 650; }
.sub-description { display: grid; gap: 12px; }
.route { list-style: none; margin: 0; padding: 0; display: grid; }
.route-stop { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--r2); padding-bottom: var(--r4); }
.route-stop:last-child { padding-bottom: 0; }
.route-stop::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--accent); }
.route-stop:last-child::before { display: none; }
.route-stop:has(+ .route-walking)::before { background: repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 10px); }
.route-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--karte); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent);
}
.route-stop.is-first .route-node { background: var(--accent); color: var(--auf-akzent); }
.route-node .icon { width: 20px; height: 20px; }
.route-body { display: grid; gap: var(--r1); min-width: 0; padding-top: 7px; }
.route-title { font-size: 17px; }
.route-figures { display: grid; gap: 12px; margin-top: 4px; }
.route-figure { display: grid; gap: 6px; margin: 0; }
.route-figure-link { display: block; border-radius: var(--rund); }
.route-figure-link:focus-visible { outline: none; box-shadow: var(--fokus); }
.route-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--rund); background: var(--sk); }
.route-actions { margin-top: 4px; }
.route-legs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.route-leg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-2); }
.route-leg-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }