/* Reference pages (/referenzen/<slug>): night hero with the result as a big number, the pinned «Der Weg»,
   key figures, quote, details and the next reference. The hero comes from subpage.css, stat tiles, quote,
   disclosure and the night call to action from referenz.css; this file adds the case-specific parts. */

/* Hero: customer name, result as the largest element */
.fall-hero h1 { margin: 16px 0 0; font-size: clamp(40px, 5vw, 72px); }
.fall-result { margin-top: 30px; display: grid; gap: 10px; }
.fall-result-val { font-weight: 500; font-size: clamp(64px, 9vw, 140px); line-height: 0.9; letter-spacing: -0.05em; color: var(--night-text); }
.fall-result .mono { color: var(--blue); }

/* Der Weg: stations left, the customer's map with the route right */
.weg-pin { display: grid; grid-template-columns: minmax(300px, 0.7fr) 1.3fr; gap: 56px; align-items: center; min-height: 100vh; padding: 12vh var(--pad); box-sizing: border-box; }
.weg-copy > .mono { color: var(--deep); }
.stations { list-style: none; margin-top: 22px; display: grid; gap: 44px; }
.station .mono { color: var(--deep); }
.station p { margin-top: 12px; max-width: 26ch; font-weight: 500; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -0.02em; }
.ticks { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.ticks svg { width: 26px; height: 26px; }
.weg-map { width: 100%; height: min(80vh, 760px); display: block; overflow: visible; }
/* While pinned, one station at a time: they share one grid cell and the script cross-fades them. */
.weg.is-pinned .station { grid-area: 1 / 1; }

/* Key figures */
.fall-zahlen { max-width: 1080px; margin: 0 auto; padding: 12vh var(--pad) 0; box-sizing: content-box; }
.fall-zahlen > .mono { color: var(--deep); }
.fall-zahlen .case-stats { margin-top: 18px; padding: 0; }

/* Quote and details in one reading column */
.fall-quote { max-width: 860px; margin: 12vh var(--pad) 0; }
.fall-quote p { font-size: clamp(26px, 3vw, 42px); line-height: 1.22; }
.fall-details { max-width: 860px; margin: 10vh auto 14vh; padding: 0 var(--pad); box-sizing: content-box; }
.fall-details .details + .details { margin-top: 0; border-top: 0; }
.fall-text { padding-bottom: 18px; }
.fall-text h3 { margin: 22px 0 8px; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.fall-text p, .fall-text ul { margin: 0 0 14px; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.fall-text ul { padding-left: 22px; }
.fall-text strong { color: var(--ink); font-weight: 500; }

/* Closing: call to action left, the next reference as a small night map card right */
.fall-cta { display: grid; grid-template-columns: 1.2fr minmax(280px, 0.8fr); gap: 48px 64px; align-items: center; }
.fall-next { display: grid; gap: 6px; padding: 18px 18px 22px; border: 1px solid rgba(191,224,255,0.18); border-radius: 16px;
  background: rgba(255,255,255,0.03); transition: transform .5s var(--ease), border-color .5s var(--ease); }
.fall-next:hover, .fall-next:focus-visible { transform: translateY(-4px); border-color: rgba(191,224,255,0.42); }
.fall-next-map { width: 100%; aspect-ratio: 400 / 220; display: block; margin-bottom: 8px; }
.fall-next .mono { color: var(--blue); }
.fall-next b { font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.fall-next-result { font-size: 15px; color: var(--night-muted); }

@media (min-width: 1000px) {
  .fall-quote { margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  /* The phone frame reaches above the terrain; night fades over its edge and calms the area behind the copy. */
  .fall-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 52%; z-index: 2; pointer-events: none;
    background: linear-gradient(var(--night) 0%, var(--night) 34%, transparent 100%); }
  .weg-pin { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-top: 10vh; }
  .weg-map { order: -1; height: auto; max-height: 60vh; }
  .fall-cta { grid-template-columns: 1fr; }
}