/* Über mich – Seitenergänzungen (nur Lab, Gesamtseite) */
.about__lead { font: 300 1.45rem/1.35 var(--display); color: var(--ink) !important; margin-bottom: 1.3rem; }

/* Kopf, Herz, Körper: drei Stationen, jede an ihrer eigenen Windung */
.floor--weg { padding-bottom: 2rem; }
.floor--station { padding: clamp(4rem, 12vh, 8rem) 0; }
.station { max-width: 34rem; }
.station--in { margin-left: clamp(0rem, 10vw, 9rem); }
.station__word {
  font: 250 clamp(3.6rem, 8vw, 7rem)/.95 var(--display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.03em;
  margin: 0 0 .9rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
  width: fit-content;
}
.station__line { font: 300 1.45rem/1.3 var(--display); color: var(--ink); margin: 0 0 1rem; }
.station p:not(.station__line) { color: var(--soft); }

.about__question { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.about__question p { max-width: 30ch; }

/* Stationen: eine Zeitleiste über fünf Abschnitte, die Kamera steigt mit */
.floor--route { padding: clamp(2.5rem, 7vh, 4.5rem) 0; }
.floor--route-first { padding-top: clamp(7rem, 18vh, 12rem); }
.floor--route-last { padding-bottom: clamp(7rem, 18vh, 12rem); }
.floor--route .timeline { max-width: 36rem; }
.floor--route .timeline::before { top: 0; bottom: 0; }
.floor--route:not(.floor--route-first) .timeline::before { top: calc(-1 * clamp(2.5rem, 7vh, 4.5rem)); }
.floor--route:not(.floor--route-last) .timeline::before { bottom: calc(-1 * clamp(2.5rem, 7vh, 4.5rem)); }
.route__split { align-items: center; }
/* Abschnitt mit Foto: Liste ist kürzer als das Foto, darum trägt hier die Spalte die Linie über die volle Höhe */
.floor--route .col:has(.route__split) { position: relative; }
.floor--route .col:has(.route__split) .timeline::before { display: none; }
.floor--route .col:has(.route__split)::before { content: ""; position: absolute; left: var(--tl-x, 0); width: 1px; background: var(--grad-v); opacity: .8;
  top: calc(-1 * clamp(2.5rem, 7vh, 4.5rem)); bottom: calc(-1 * clamp(2.5rem, 7vh, 4.5rem)); }
.route__more { margin: 1.2rem 0 0 1.4rem; }
.route__photo { max-width: 22rem; }

.about__facts div { grid-template-columns: 11rem 1fr; }
.about__facts dt { color: var(--ink); font-weight: 500; }

@media (max-width: 760px) {
  .station--in { margin-left: 0; }
  .about__facts div { grid-template-columns: 1fr; gap: .2rem; }
  .route__photo { max-width: none; margin-left: 1.4rem; }
  .floor--route .timeline li { grid-template-columns: 4.2rem 1fr; }
}