/* ==========================================================================
   leomore — Seite: Referenzen
   Case-Story-Buehne: Page-Hero, Device-Rahmen (moritzdenninger-Fullpage-Scan),
   Case-Grid (Ausgangslage/Vorgehen/Ergebnis), Ink-Band "More coming".
   Konsumiert ausschliesslich Tokens/Primitives aus style.css. Kein Hex-Wert.
   ========================================================================== */

/* ---------- Page-Hero: Kicker-Verlaufsstrich + Riesen-H1 + Grain ---------- */
.ref-kicker {
  display: block;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  margin-bottom: 20px;
}
.page-hero h1 {
  font-size: var(--size-loud);
}

/* ---------- Case-Grid: Ausgangslage / Vorgehen / Ergebnis ---------- */
.case-section-top {
  padding-top: 0;
}
.case-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}
.case-step {
  position: relative;
  overflow: hidden; /* clippt die Verlaufs-Oberkante an den runden Ecken -- gleiches Muster wie .hero-config::before */
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  padding: 28px 26px;
}
.case-step h3 {
  font-size: 20px;
  margin: 14px 0 10px;
}
.case-step p {
  font-size: 15px;
  color: var(--ink-soft);
}
/* Ergebnis = der Fortschritts-Moment: einzige Karte mit Verlaufs-Oberkante */
.case-step-result {
  box-shadow: var(--ring-strong);
}
.case-step-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
}

/* ---------- Device-Rahmen: Full-Page-Screenshot scrollt IM Rahmen ---------- */
.case-figure {
  margin-top: clamp(36px, 5vw, 60px);
}
.case-figure figcaption {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 12px;
  max-width: 560px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.case-fig-link {
  display: block;
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  /* view()-Fix (Muster w5.css "Scroll-Container-Fixes"): overflow:hidden würde
     dieses Element selbst zum Scroll-Container machen und jede Timeline
     einfrieren, die daran haengt. clip-path liefert dieselbe optische Kappung,
     erzeugt aber keinen Scroll-Container -- die view()-Timeline unten bindet
     sich sauber an den echten Seiten-Scroller. */
  overflow: visible;
  clip-path: inset(0 round var(--r-lg));
}
.case-fig-link:focus-visible {
  outline: 3px solid var(--c2);
  outline-offset: 3px;
}
.case-shot {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  /* CSS-only Fallback (kein view()-Support / kein JS): sanfter Hover-Scroll,
     mehrere Sekunden lang. Ruhezustand zeigt immer das obere Drittel. */
  transition: transform 7s var(--ease-out-strong);
}
.case-fig-link:hover .case-shot,
.case-fig-link:focus-visible .case-shot {
  transform: translateY(-58%);
}
/* Kein sticky Hover auf Touch -- Ruhezustand bleibt statisch */
@media (hover: none) {
  .case-fig-link:hover .case-shot,
  .case-fig-link:focus-visible .case-shot {
    transform: translateY(0);
  }
}

/* Bevorzugter Pfad: waehrend die Seite scrollt, scrollt das Bild im Rahmen mit --
   nur wenn view()-Timelines unterstuetzt werden UND Bewegung erlaubt ist. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .case-fig-link {
      view-timeline-name: --ref-case-scroll;
    }
    .case-shot {
      /* Die Scroll-Animation besitzt transform exklusiv -- der 7s-Hover-
         Fallback oben darf hier nicht mehr mitreden (Animation schlaegt
         Transition ohnehin, aber ohne transition bleibt auch nach einem
         etwaigen Animation-Abbruch kein traeger Nachlauf zurueck). */
      transition: none;
      animation-name: ref-case-scan;
      animation-timeline: --ref-case-scroll;
      /* "cover" statt "contain": das Fenster reicht ueber Rahmen+Viewport-Hoehe,
         bleibt also bei jeder Rahmen-/Viewport-Kombination lang genug fuer eine
         ruhige Bewegung (contain wuerde bei einem Rahmen nahe Viewport-Hoehe
         auf eine Handvoll Pixel Scrolldistanz kollabieren -- ruckartig/quasi
         sofort). Der Zielwert -58% ist konservativ unter dem rechnerischen
         Flush-Bottom-Punkt, kein Ueberschiessen ins leere Bild-Ende. */
      animation-range: cover 0% cover 100%;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
  }
}
@keyframes ref-case-scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-58%);
  }
}
/* Reduced Motion: Endzustand = Default, auch der Hover-Fallback bewegt nichts */
@media (prefers-reduced-motion: reduce) {
  .case-fig-link:hover .case-shot,
  .case-fig-link:focus-visible .case-shot {
    transform: translateY(0);
  }
}

/* ---------- Case-Links: Verlaufs-Underline statt Volltonlinie ---------- */
.ref-link {
  border-bottom: none;
}
.ref-link:hover,
.ref-link:focus-visible {
  border-color: transparent;
}
.ref-link .grad-underline {
  color: inherit;
}
/* Hover/Fokus gilt fuer den ganzen Link (inkl. Pfeil-Icon), nicht nur fuer den
   Text selbst -- sonst greift die Verlaufs-Linie nicht, wenn der Zeiger genau
   ueber dem SVG-Pfeil steht. */
.ref-link:hover .grad-underline,
.ref-link:focus-visible .grad-underline {
  background-size: 100% 2px;
}

/* ---------- More-Coming-Banner: Ink-Band mit Verlaufskanten ---------- */
.more-coming {
  position: relative;
  overflow: hidden; /* clippt die Verlaufskanten an den runden Ecken */
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.more-coming::before,
.more-coming::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
}
.more-coming::before {
  top: 0;
}
.more-coming::after {
  bottom: 0;
}
.more-coming-text {
  position: relative;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600;
  font-family: 'Clash Display', sans-serif;
  letter-spacing: -.015em;
  color: var(--bg); /* warmweiss auf Ink */
  max-width: 480px;
}
.more-coming .btn {
  position: relative;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .case-grid {
    grid-template-columns: 1fr;
    /* Gestapelt braucht die Reihe keinen Spalten-Luftraum mehr -- dichterer
       Kartenrhythmus statt des Desktop-Abstands zwischen drei Nebeneinander-Spalten. */
    gap: 14px;
    margin-top: 32px;
  }
  .case-step {
    padding: 22px 20px;
  }
  .case-figure {
    margin-top: 28px;
  }
}
@media (max-width: 600px) {
  .more-coming {
    flex-direction: column;
    align-items: flex-start;
  }
  .more-coming .btn {
    width: 100%;
    justify-content: center;
  }
}