/* Sektion ferne: Weiß. Statisch (Jacques 2026-11-11: Scroll-Animation entfernt). Fünf Schritte links, ein Bild rechts in Spalten 7 bis 12. */
#ferne { height: auto; min-height: 0; }
#ferne > .wrap { height: auto; display: block; }
#ferne h2 { max-width: none; margin-bottom: var(--s-6); }

#ferne .fe-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
#ferne .fe-text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-5); }
#ferne .fe-pics { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
#ferne .fe-pic { margin: 0; }
#ferne .fe-pic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
#ferne .fe-pic--main { grid-column: 1 / -1; }
#ferne .fe-pic--main img { aspect-ratio: 16 / 9; }

#ferne .fe-lead { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 50ch; }
#ferne .fe-steps { list-style: none; margin: 0; padding: 0; counter-reset: fe; }
#ferne .fe-step { counter-increment: fe; border-top: 1px solid var(--rule); padding: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-2); }
#ferne .fe-step:first-child { border-top-color: var(--igc-blue); }
#ferne .fe-step:last-child { border-bottom: 1px solid var(--rule); }
#ferne .fe-step h3 { font-size: 19px; font-weight: 600; font-stretch: 100%; color: var(--ink); display: flex; align-items: baseline; gap: var(--s-4); margin: 0; }
#ferne .fe-step h3::before { content: counter(fe); flex: none; width: 28px; font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-feature-settings: "tnum"; color: var(--igc-blue); letter-spacing: -.04em; }
#ferne .fe-step p { color: var(--ink-2); max-width: 56ch; padding-left: calc(28px + var(--s-4)); font-size: 16px; line-height: 1.55; margin: 0; }
#ferne .fe-dist { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }

@media (max-width: 1023px) {
  #ferne .fe-text, #ferne .fe-pics { grid-column: 1 / -1; }
  #ferne .fe-pics { order: -1; margin-bottom: var(--s-5); }
}
@media (max-width: 767px) {
  #ferne .fe-step h3 { font-size: 18px; }
  #ferne .fe-step p { padding-left: 0; }
}